javascript - 使用 jQuery 动态添加时脚本未加载

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

我找到了解决方案，

首先，您不能从外部加载的脚本向文档写入任何内容，

无法对“文档”执行“写入”:除非显式打开，否则无法从异步加载的外部脚本写入文档

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

1).

您正在创建 Iframe 作为 html 内容并写入文档

document.write(htmlCode)

上面的行创建了动态加载内容的问题。

尝试像下面这样的代码，而不是你的代码。

var htmlCode = document.createElement("iframe");
 htmlCode.setAttribute("title", title.replace(/[\\"']/g,'\\$&').replace(/&/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

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