Question

我正在尝试使用jQuery动态地将脚本添加到我的项目中。该脚本已成功添加到head代码中，但内容未在body代码中呈现。

这是我的代码：

  <script type="text/javascript">
    window.onload = function() {
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.src = "https://form.jotform.com/jsform/81003857231348";
        $("head").append(s);
    }
  </script>

但是，如果我直接添加脚本，脚本会成功加载：
<script type="text/javascript" src="https://form.jotform.com/jsform/81003857231348"></script>

https://jsfiddle.net/xpvt214o/98587/

我错过了什么吗？

Answer 1

我找到了解决方案，

首先，你不能从外部加载的脚本中写入任何文档，

无法在'Document'上执行'write'：除非明确打开，否则无法从异步加载的外部脚本写入文档

有两种方法可以解决这个问题。

<强> 1）。

您正在将 iframe 创建为html内容并将其作为

写入文档

document.write(htmlCode)

创建动态加载内容的问题。

而不是代码尝试类似下面的内容。

var htmlCode = document.createElement("iframe");
 htmlCode.setAttribute("title", title.replace(/[\\"']/g,'\\$&').replace(/&amp;/g,'&'));
 htmlCode.setAttribute("src","");
 htmlCode.setAttribute("allowtransparency","true");
 htmlCode.setAttribute("allow","geolocation; microphone; camera");
 htmlCode.setAttribute("allowfullscreen","true");
 htmlCode.setAttribute("name",this.formId);
 htmlCode.setAttribute("id",this.iframeDomId);

 document.body.appendChild(htmlCode);

在你的html中添加以下Js代码

<script type="text/javascript">
   var s = document.createElement("script");
   s.type = "text/javascript";
    s.src = "https://form.jotform.com/jsform/81003857231348";
   document.getElementsByTagName("head")[0].appendChild(s);
</script>

<强> 2）。

而不是

document.write(htmlCode)

尝试

document.body.innerHTML=htmlCode

如果您仍然遇到任何问题，请告诉我。

Answer 2

尝试使用

window.onload = function() {
   //your script declaration here
}

而不是jquery ready()

Answer 3

您可以使用jQuerys getScript()加载和执行脚本。它不需要在DOM中访问您的元素。

$.getScript ("test.js", function (){

    alert ("Running test.js");

});

使用jQuery动态添加脚本时不加载脚本

3 个答案: