浏览器如何以及何时对文档的 DOM 进行实时更改？

发布于 2024-09-03 07:33:21 字数 804 浏览 5 评论 0原文

我的网站将外部 Javascript 文件动态嵌入到 head 标签中。外部Javascript定义了一个全局变量myString =“data”。 myString 在什么时候可以被网站内的 Javascript 访问？

<html>
<head>
    <script type="text/javascript">
        myString = null;
        external = document.createElement("script");
        //externalScript.js is one line, containing the following:
        //myString = "data";
        external.setAttribute("src", "externalScript.js");
        external.setAttribute("type", "text/javascript");
        document.getElementsByTagName("head")[0].append(external);
        alert(myString);
    <script>
</head>
<body>
</body>
</html>

此代码在 Chrome 和 IE 中警告 null（当我认为它会警告“数据”时），即使此时 DOM 已加载到 externalScript.js 中。浏览器何时实际评估 externalScript.js？我什么时候可以访问 myString 的新值？

原文

My website dynamically embeds an external Javascript file into the head tag. The external Javascript defines a global variable myString = "data". At what point does myString become accessible to Javascript within the website?

<html>
<head>
    <script type="text/javascript">
        myString = null;
        external = document.createElement("script");
        //externalScript.js is one line, containing the following:
        //myString = "data";
        external.setAttribute("src", "externalScript.js");
        external.setAttribute("type", "text/javascript");
        document.getElementsByTagName("head")[0].append(external);
        alert(myString);
    <script>
</head>
<body>
</body>
</html>

This code alerts null (when I thought it would alert "data") in Chrome and IE, even though the DOM has loaded in externalScript.js at this point. When is externalScript.js actually evaluated by the browser and at what point do I have access to the new value of myString?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

再浓的妆也掩不了殇 2024-09-10 07:33:21

当该脚本元素的 onload 事件触发时，您可以访问它，如下所示：

external = document.createElement("script");
external.onload = function() { alert(myString); };
script.onreadystatechange= function () { //for IE, the special kid...
  if (this.readyState == 'complete') alert(myString);
}
external.setAttribute("src", "externalScript.js");
external.setAttribute("type", "text/javascript");
document.getElementsByTagName("head")[0].appendChild(external);

这只是附加一个函数，以便在脚本加载后运行，执行依赖于其中脚本的任何代码。更正之前的答案：正如 seanmonstar 在评论中指出的那样（谢谢！），您确实再次需要 IE 例外，因为它有点“特别”...

You can access it when the onload event fires for that script element, like this:

external = document.createElement("script");
external.onload = function() { alert(myString); };
script.onreadystatechange= function () { //for IE, the special kid...
  if (this.readyState == 'complete') alert(myString);
}
external.setAttribute("src", "externalScript.js");
external.setAttribute("type", "text/javascript");
document.getElementsByTagName("head")[0].appendChild(external);

This just attaches a function to run once that script has loaded, execute any code that depends upon the script in there. Correction to previous answer: as seanmonstar points out in comments (thanks!), you do indeed need an IE exception here again, because it's a bit "special"...

回复收藏 0 原文

~没有更多了~