使用外部脚本动态添加的javascript不会'；我不会被处决_Javascript_Html_Dom

使用外部脚本动态添加的javascript不会'；我不会被处决

javascript html dom

使用外部脚本动态添加的javascript不会'；我不会被处决,javascript,html,dom,Javascript,Html,Dom,这就是我们的场景。。。我们要做的第一件事是附加一段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

这就是我们的场景。。。我们要做的第一件事是附加一段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（'helloworld'）调用由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>

编辑6
我还尝试从as导入节点
不允许此方法在不同文档之间移动节点。如果要从其他文档追加节点，则必须使用document.importNode（）方法
并试图改变秩序。1.css 2.div 3.js像这样，但仍然没有成功。。。有人知道这是怎么回事吗
检查上述代码
编辑7
正如中所建议的，我将div的innerHTML设置为scripts+content，然后像这样附加到DOM中：
(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);
})();

检查上述代码
但是仍然没有成功
编辑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);

var-dom=parseResponse（responsetext）；
var _jr=dom.getElementById（'script1'）；//带有src属性的标记
var_vc=dom.getElementById（'script2'）//内联仅用于测试目的，它实际上也应该是外部脚本
var_rv=dom.getElementById（'script3'）//内联
var_rw=dom.getElementById（'external_div'）；
var_b=document.getElementsByTagName（'body'）[0]；
var_d=document.createElement（'div'）_d、 id='内部分区'；
_d、 appendChild（document.importNode（_rw，true））；
_d、 appendChild（document.importNode（_jr，true））；
_d、 appendChild（document.importNode（_rv，true））//如果没有第二个参数TRUE，则无法获取脚本内容
_d、 appendChild（document.importNode（_-vc，true））//如果没有第二个参数TRUE，则无法获取脚本内容
_b、 儿童(d),；

不起作用。只有当我从其他文档中获取内联脚本的innerHTML，创建如answer中所建议的元素，设置它们的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>


命令拒绝，允许
全盘否定
允许从127.0.0.1开始
命令拒绝，允许
全盘否定
允许从127.0.0.1开始
命令允许，拒绝
通融
重新启动发动机
重写库/第1页/
#重写基/
重写cond%{REQUEST_FILENAME}-F
重写cond%{REQUEST_FILENAME}-D
重写cond%{REQUEST_FILENAME}-L
重写规则^（+）$index.php？url=$1[QSA，L]

.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

#开始WordPress
重新启动发动机
重写BASE/direktexpress/
重写规则^index\.php$-[L]
重写cond%{REQUEST_FILENAME}-F
重写cond%{REQUEST_FILENAME}-D
重写规则/第2页/index.php[L]
#结束WordPress

编辑11
所以我可能会给bounty@Drakes一个奖励，只是为了他的努力和他在我的问题上花费的时间，并展示一些截图。这肯定是firefox的bug，我刚刚在chrome上测试过，它可以正常工作
第一张图片：源代码192.168.2.197/testing/whatever/etc..htaccess与上面的示例相同

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

第三张图片是inspector的屏幕截图，我的dom是什么样子的：

第四张图片。。。。什么也没发生。这只是一个与我的问题无关的警告（我希望如此），因为即使我删除了所有脚本，它仍然会出现。

这是firefox的bug吗？
问题是上面的代码混合了appendChild
和innerHTML
。在某些情况下，这两种方法的表现并不明显。前者允许在新插入的脚本节点连接到DOM时执行它们。后者没有。这对许多人来说都是一个难题。请谷歌“脚本和innerHTML”，你会发现，面临类似问题的并非只有你一个人
如果你（1）改变
到
另外（2）改变
到
然后您的脚本将被执行。下面是一个演示：

var b=document.getElementsByTagName（'body'）[0]；
/*工作*/
var s1=document.createElement（'script'）；
s1.innerHTML=“console.log（'I will execute'）”；
b、 儿童（s1）；
/*失败*/
var s2=document.createElement（'script'）；
s2.innerHTML=“while（1）{alert（'别担心！我不会执行'）；}”；
b、 innerHTML=s2.outerHTML；
log（“它没有执行”）您当前正在将脚本加载到页面中。这发生在页面js已经执行之后（因为它是异步的，并且通常加载一个ex）
_d.innerHTML = _jr + _vc + _rv

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

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');

function evalRequest(url) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            eval(xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET", url, true);
    xmlhttp.send(null);
}; 

function getScriptsAsText() {
    var div = document.createElement('div');
    var scripts = [];
    var scriptNodes = document.getElementsByTagName('script');

    for (var i = 0, iLen = scriptNodes.length; i < iLen; i++) {
        div.appendChild(scriptNodes[i].cloneNode(true));
        scripts.push(div.innerHTML);
        div.removeChild(div.firstChild);
    }
    return scripts;
};

    (function () {
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(CreateScriptTag('http://blabla.com/script.js',true), s);
    })();
    function CreateScriptTag(src, isAsync) {
        var e = document.createElement('script')
        e.type = 'text/javascript';
        e.async = isAsync;
        e.src = src;
    return e;
    }
    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.open("GET", "http://blabla.com/api/");
        xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState === 4 && xmlhttp.status === 200) createDiv(xmlhttp.responseText); };
        xmlhttp.send();
    }
    function parseResponse(response) {
        var parser = new DOMParser();
        var dom = parser.parseFromString(response, "text/html");
        return dom;
    }
    function createDiv(responsetext) {
        var head=document.getElementsByTagName('head')[0],dom = parseResponse(responsetext),_div=document.createElement('div');
        head.appendChild(document.importNode(dom.getElementById('styles'), true)); //Assuming stylesheets are working fine.
        _div.id = 'just_id';
        //div.innerHTML = _script1 + _script2 + _script3;
        document.getElementsByTagName('body')[0].appendChild(_div.appendChild(dom.getElementById('my_div')));

        head.appendChild(CreateScriptTag(dom.getElementById('script1').getAttribute("src"),true));
        head.appendChild(CreateScriptTag(dom.getElementById('script2').getAttribute("src"),true));
        head.appendChild(CreateScriptTag(dom.getElementById('script3').getAttribute("src"),true));

    /* or another idea;
        document.write(_script1 + _script2 + _script3);
    */
    }
    ajaxCall();

var _jr = dom.getElementById('script1').outerHTML;

var srcScript1Left = _jr.split('src="');
srcScript1Right = srcScript1Left[1].split('"');
srcScript1 = srcScript1Right[0];

console.log(srcScript1);

$.getScript(srcScript1, function()
{
    // The external script has been executed.
});

var _jr = dom.getElementById('script1').outerHTML;

var srcScript1Left = _jr.split('src="');
srcScript1Right = srcScript1Left[1].split('"');
srcScript1 = srcScript1Right[0];

console.log(srcScript1); // Display the name of the external script file

if(window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest();
} else {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        eval(xmlhttp.responseText); // Execute the external script
    }
};
xmlhttp.open("GET",srcScript1);
xmlhttp.send();