个人中心
gpt4 book ai didi

javascript - 使用外部脚本动态添加的 javascript 不会被执行

转载 作者：技术小花猫 更新时间：2023-10-29 12:40:36 24 4
gpt4 key购买 nike

所以这是我们的场景...我们要做的第一件事是，我们附加一段 javascript 代码，将外部脚本添加到文档中，如下所示:

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

然后在script.js发生以下情况:

function ajaxCall() { 
    //... some script to send ajax request which calls createDiv() after success
   if (window.XMLHttpRequest){
      xmlhttp=new XMLHttpRequest();
   }
   else{
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlhttp.onreadystatechange=function(){
      if(xmlhttp.readyState==4&&xmlhttp.status==200){
         createDiv(xmlhttp.responseText);
      }
   };
   xmlhttp.open("GET","http://blabla.com/api/");
   xmlhttp.send(); 
}
function parseResponse(response) {
    var parser = new DOMParser();
    var dom = parser.parseFromString(response, "text/html");
    return dom;
}
function createDiv(responsetext)
{
   var dom = parseResponse(responsetext);

   var _ws = dom.getElementById('styles');
   var h = document.getElementsByTagName('head')[0];
   h.appendChild(document.importNode(_ws, true));

   var _jr = dom.getElementById('script1').outerHTML;
   var _vc = dom.getElementById('script2').outerHTML;
   var _rv = dom.getElementById('script3').outerHTML;

   var _rw = dom.getElementById('my_div');
   var _b = document.getElementsByTagName('body')[0];
   var _d = document.createElement('div'); _d.id = 'just_id';
   _d.innerHTML = _jr + _vc + _rv;
   _d.appendChild(document.importNode(_rw, true));
   _b.appendChild(_d);
}
ajaxCall();

一切正常，脚本和 div 按预期附加到预期位置，但附加的脚本未执行且不影响附加的 div。这是为什么？我怎样才能让它执行？我们也没有在控制台中收到任何警告/错误。使用最新的 firefox。

编辑 1

评论:您展示的示例脚本只是定义了函数，但实际上从未调用它们

它实际上调用了一个发出 ajax 请求的函数，请检查已编辑的代码片段。

编辑 2

评论:你试过把逻辑放在回调中，然后在createDiv中调用吗？可能会添加一些日志来测试它是否被调用但找不到 div

我刚试过 console.log('hello world');调用 createDiv() 附加的脚本之一功能，但它什么也不做。

编辑 3

了解更多详情。加载页面时，我可以看到

<script type="text/javascript" id="script1" src="http://blabla.com/script1.js"></script>
<script type="text/javascript" id="script2" src="http://blabla.com/script2.js"></script>
<script type="text/javascript" id="script3" src="http://blabla.com/script3.js"></script>
<div id="just_id">Content here</div>

在 DOM-Inspector 中，如上所述，有 console.log('hello world');测试它，但它没有被执行。

编辑 4

通过 createDiv() 添加了一些 CSS文件的功能 <head></head>它会影响我的 id 为“just_id”的 div。 JS 仍然无法正常工作。

编辑 5

还尝试在我的函数中附加内联 javascript 而不是外部 javascript，但仍然没有成功。可以在 DOM-Inspector 中看到以下内容，但代码不记录任何内容。

<script type="text/javascript">
   console.log('test');
</script>

编辑 6

我还尝试从 suggested here 导入节点

This method is not allowed to move nodes between different documents. If you want to append node from a different document the document.importNode() method must be used.

还尝试更改顺序。 1.css 2.div 3.js 像这样但仍然没有成功......任何人都知道这里发生了什么？

检查上面的代码

编辑 7

如 How do you execute a dynamically loaded JavaScript block? 中的建议我将我的 div 的 innerHTML 设置为脚本 + 内容，然后像这样附加到 DOM:

检查上面的代码

但还是没有成功。

编辑 8

添加了ajax函数代码。 xmlhttp.open("GET","http://blabla.com/api/"); 中的第三个参数true(异步)和 false(同步)已经尝试过了。仍然没有成功。

编辑 9

函数createDiv()正如答案中所建议的:

var dom = parseResponse(responsetext);

var _jr = dom.getElementById('script1'); //<script> tag with src attribute
var _vc = dom.getElementById('script2'); //inline <script> for test purposes only, it should actualy be external script also
var _rv = dom.getElementById('script3'); //inline <script>

var _rw = dom.getElementById('external_div');
var _b = document.getElementsByTagName('body')[0];
var _d = document.createElement('div'); _d.id = 'internal_div';
_d.appendChild(document.importNode(_rw, true));
_d.appendChild(document.importNode(_jr, true));
_d.appendChild(document.importNode(_rv, true)); //without second parameter TRUE, I dont get script content
_d.appendChild(document.importNode(_vc, true)); //without second parameter TRUE, I dont get script content
_b.appendChild(_d);

不起作用。仅当我从其他文档中获取内联脚本的 innerHTML，创建答案中建议的元素，设置它们的 innerHTML，然后附加到当前文档时，才能工作。外部脚本根本不会加载。

编辑 10

.htaccess 来自本地主机...:

<Files *.html>
    Order Deny,Allow
    Deny from all
    Allow from 127.0.0.1
</Files>

<Files *.php>
    Order Deny,Allow
    Deny from all
    Allow from 127.0.0.1
</Files>

<Files index.php>
    Order Allow,Deny
    Allow from all
</Files>

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /page1/
#RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^(.+)$ index.php?url=$1 [QSA,L]
</IfModule>

.htaccess 来自 192.*** ...:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /direktexpress/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /page2/index.php [L]
</IfModule>
# END WordPress

编辑 11

所以我可能会悬赏@Drakes，只是因为他在我的问题上付出的努力和花费的时间，并会显示一些屏幕截图。这绝对是 firefox 的错误，我刚刚在 chrome 上测试并且它有效。

第1张图:192.168.2.197/testing/whatever/etc的源代码。 .htaccess 与上面的示例保持相同

Source Code for 192.168.2.197

第二张图片是script.js的源代码，正在192.168.2.197/testing/whatever/etc上加载。 .htaccess 与上面的示例保持相同:

Script.js Source

第三张图是inspector的截图，我的dom长什么样子:

Dom

第 4 张图片....没有任何反应。只是一个与我的问题无关的警告(我希望如此)，因为即使我删除了所有脚本，它仍然会出现。

Console

它是 Firefox 的错误吗？

最佳答案

问题在于上面的代码将 appendChild 与 innerHTML 混合在一起。两者在某些情况下的表现不同，这在直觉上并不明显。前者允许新插入的脚本节点在附加到 DOM 时执行。后者没有。这一直是很多人头疼的问题。请谷歌“script and innerHTML”，你会发现遇到类似问题的不止你一个。

如果你(1)改变

_d.innerHTML = _jr + _vc + _rv

到

_d.appendChild(document.importNode(_jr));
_d.appendChild(document.importNode(_vc));
_d.appendChild(document.importNode(_rv));

另外 (2) 改变

var _jr = dom.getElementById('script1').outerHTML;
var _vc = dom.getElementById('script2').outerHTML;
var _rv = dom.getElementById('script3').outerHTML;

到

var _jr = dom.getElementById('script1');
var _vc = dom.getElementById('script2');
var _rv = dom.getElementById('script3');

然后您的脚本将被执行。这是一个演示:

var b = document.getElementsByTagName('body')[0];

/* Works */
var s1 = document.createElement('script');
s1.innerHTML = "console.log('I will execute')";
b.appendChild(s1);

/* Fails */
var s2 = document.createElement('script');
s2.innerHTML = "while(1){alert('Do not worry! I will not execute');}";
b.innerHTML = s2.outerHTML;
console.log("It didn't execute");

测试

我在我的服务器上运行了 OP 的代码，以尽可能地重现问题。鉴于提供的代码，我可以让它在我的服务器上按预期工作。我只将 AJAX URL 从 http://blabla.com/api/ 更改为 api.html 并提供了我自己的文件，因为 OP 没有提供任何文件，但我从 OP 的 JavaScript 中拼凑出它应该包含的内容)。以下是示例结果:

index.html

<html lang="en">
<body>
    <script>
        (function() {
            var e = document.createElement('script'); e.type = 'text/javascript'; e.async = true; e.src = 'script.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s);
        })();
    </script>
</body>
</html>

script.js

这是根据我上面的规范修改的 OP 代码(使用 appendChild 而不是 innerHTML，AJAX 调用返回下面 api.html 的内容)

function ajaxCall() {
    //... some script to send ajax request which calls createDiv() after success
    if (window.XMLHttpRequest){
        xmlhttp=new XMLHttpRequest();
    }
    else{
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState==4&&xmlhttp.status==200){
            createDiv(xmlhttp.responseText);
        }
    };
    xmlhttp.open("GET","api.html");
    xmlhttp.send();
}
function parseResponse(response) {
    var parser = new DOMParser();
    var dom = parser.parseFromString(response, "text/html");
    return dom;
}
function createDiv(responsetext)
{
    var dom = parseResponse(responsetext);

    var _ws = dom.getElementById('styles');
    var h = document.getElementsByTagName('head')[0];
    h.appendChild(document.importNode(_ws, true));

    var _jr = dom.getElementById('script1');
    var _vc = dom.getElementById('script2');
    var _rv = dom.getElementById('script3');

    var _rw = dom.getElementById('my_div');
    var _b = document.getElementsByTagName('body')[0];
    var _d = document.createElement('div'); _d.id = 'just_id';

    _d.appendChild(document.importNode(_jr, true));
    _d.appendChild(document.importNode(_vc, true));
    _d.appendChild(document.importNode(_rv, true));

    _d.appendChild(document.importNode(_rw, true));
    _b.appendChild(_d);
}
ajaxCall();

api.html(由 AJAX 调用返回)

<!DOCTYPE html>
<html>
<body>
    <style type="text/css" id="styles"></style>
    <script type="text/javascript" id="script1" src="script1.js"></script>
    <script type="text/javascript" id="script2">console.log("incline script 2")</script>
    <script type="text/javascript" id="script3">console.log("incline script 3")</script>
    <div id="my_div"></div>
</body>
</html>

script1.js

console.log("src script1");

这里是 DevTools 结果，表明这是有效的。

Devtools inspection

Console results

关于javascript - 使用外部脚本动态添加的 javascript 不会被执行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38476544/

24 4 0
文章推荐： linux - Ansible:在本地主机上以不同的用户身份运行
文章推荐： android - 知道为什么 Material 设计 "home up"按钮在旋转后会变黑吗？
文章推荐： android - Unity3D ETC预览不会显示ETC1格式
文章推荐： c - 使用 fork 在进程的二叉树中进行广度优先搜索
技术小花猫
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com