如果使用document.write则无法以编程方式插入js

发布于 2024-12-24 22:11:56 字数 656 浏览 3 评论 0原文

我试图以编程方式插入 js 文件，使用 jquery 和类似的东西：

var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = 'http://someurl/test.js';
$('body').append(script);

它工作正常，如果 test.js 包含 alert 或一些简单的代码，它工作正常，但如果文件 test.js 包含document.write，并且包含 js 的文件托管在 test.js（或 localhost）之外的另一个域上，没有任何反应，并且 firebug 显示错误：

从异步加载的外部调用 document.write() 脚本被忽略。

如果 test.js 和包含它的文件托管在同一个域上，在 chrome 上它仍然无法工作，但在 firefox 上 document.write 可以正常执行，但页面永远保持“加载”状态并且嗅探器显示对所有处于“待处理”状态的文件的请求。

我还可以尝试哪些其他方法以编程方式包含 js 文件？

原文

I am trying to insert js files programmatically, using jquery and something like this:

var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = 'http://someurl/test.js';
$('body').append(script);

It works fine, if test.js contains an alert or some simple code it works fine, but if the file test.js contains document.write, and the file including the js is hosted on another domain than test.js (or localhost), nothing happens and firebug shows the error :

A call to document.write() from an asynchronously-loaded external
script was ignored.

If the test.js and the file that include it are hosted on the same domain, on chrome it still wont work but on firefox the document.write gets executed fine but the page stays "loading" forever and sniffer show request to all the files with "pending" status.

What other methods to include js files programmatically could I try?

分享到QQ

分享到微博

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

发布评论

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

梦里的微风 2024-12-31 22:11:56

使用 innerHTML 而不是使用 document,write。

并使用以下代码来注册脚本，

(function() {
    var jq = document.createElement('script');
    jq.type = 'text/javascript';
    jq.async = true;
    jq.src = 'http://someurl/test.js';
    var s = document.body.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(jq, s);
})();

use innerHTML instead of using document,write.

and use following code to register script,

(function() {
    var jq = document.createElement('script');
    jq.type = 'text/javascript';
    jq.async = true;
    jq.src = 'http://someurl/test.js';
    var s = document.body.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(jq, s);
})();

回复收藏 0 原文

￠好甜 2024-12-31 22:11:56

Document.write 仅适用于加载 html 时的同步任务（第一次），绝不适用于您尝试执行的异步任务。

回复收藏 0 原文

明月夜 2024-12-31 22:11:56

您想要做的是将

<html>
    <head>
        <script>
            var load_js = function(data, callback)
            {
                    var head = document.getElementsByTagName("head")[0];

                    var script = document.createElement("script");
                    script.type = "text/javascript";
                    script.src = data;
                    head.appendChild(script);

                    if(callback != undefined)
                            callback();
            }

            load_js("http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js");

            setTimeout(function() {
                $('body').html('loaded');
            }, 1000);
        </script>
    </head>

    <body></body>
</html>

What you want to do is dynamically insert a <script> DOM element into the HEAD element. I had this script sitting around. As an example, it's a race condition, but you get the idea. Call load_js with the URL. This is done for many modern APIs, and it's your best friend for cross-domain JavaScript.

<html>
    <head>
        <script>
            var load_js = function(data, callback)
            {
                    var head = document.getElementsByTagName("head")[0];

                    var script = document.createElement("script");
                    script.type = "text/javascript";
                    script.src = data;
                    head.appendChild(script);

                    if(callback != undefined)
                            callback();
            }

            load_js("http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js");

            setTimeout(function() {
                $('body').html('loaded');
            }, 1000);
        </script>
    </head>

    <body></body>
</html>

回复收藏 0 原文