使用jQuery动态添加Script脚本时无法加载渲染问题

我明白你遇到的困扰了——明明把JotForm的脚本成功加到了head标签里，可表单就是没在body里显示出来，直接写script标签却能正常加载。这其实是第三方脚本动态加载时常见的时机匹配问题，咱们来一步步搞定它：

问题根源 #

JotForm的jsform脚本设计成加载完成后立即执行表单插入逻辑。当你直接在页面中写script标签时，脚本会在页面解析过程中加载，此时DOM处于可操作状态，脚本能顺利把表单插入到body里。但你用window.onload动态添加脚本时，会遇到两个核心问题：

• window.onload要等所有资源（包括图片、样式表）加载完成才触发，此时脚本加载后的初始化逻辑可能错过了最佳DOM操作时机；
• 直接append脚本到head时，没监听脚本的加载完成事件，异步加载的脚本可能在DOM未完全就绪时就执行了初始化，导致无法正确插入表单。

解决方案1：用jQuery的getScript方法（最省心） #

jQuery的getScript专门用来处理外部脚本的异步加载，会在脚本加载完成后自动执行，还能完美适配DOM就绪时机。把你的代码改成这样：

$(document).ready(function() {
  $.getScript("https://form.jotform.com/jsform/81003857231348")
    .done(function() {
      console.log("表单脚本加载完成，已自动渲染");
    })
    .fail(function() {
      console.error("脚本加载失败，请检查URL是否正确");
    });
});

解决方案2：手动监听脚本的onload事件 #

如果你不想用getScript，也可以手动创建脚本元素并监听它的加载完成事件，确保脚本在DOM就绪后执行初始化：

$(document).ready(function() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "https://form.jotform.com/jsform/81003857231348";
  
  // 监听脚本加载完成，保证初始化逻辑在正确时机触发
  script.onload = function() {
    console.log("脚本加载完成，表单已插入页面");
  };
  
  $("head").append(script);
});

为什么这两种方法有效？ #

• $(document).ready()会在DOM结构完全就绪（无需等待图片等资源）时触发，比window.onload早，刚好匹配JotForm脚本的初始化需求；
• 不管是getScript还是监听onload事件，都能确保脚本加载完成后再执行内部的表单插入逻辑，彻底避免了异步加载导致的时序错位问题。

你可以试试上面的方案，应该就能看到表单正常渲染啦～

内容的提问来源于stack exchange，提问作者Valip