动态添加脚本标签并执行 $(document).ready，无需使用 iframe 或 document.write

Question

我有一个来自 api 响应的字符串。现在我想将这个脚本和样式标签集成到我的应用程序中并执行脚本。

  const styleScriptText = '<style type="text/css">#checkoutmodal .checkoutmodal-box{background:#FFF !important}</style><script src="https://someurl/lib/jquery.min.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function() { console.log("test")});</script>'

我尝试使用 iframe 加载它，我可以达到预期的结果

  const iframe = document.createElement('iframe');

   const html = `<body>${styleScriptText}</body>`;
   iframe.srcdoc = html;
 
   iframe.style.width = "47%";
   iframe.style.left = "25%";
   iframe.style.height = "100vh";
   iframe.style.position = "relative";
   document.getElementById("parentId").appendChild(iframe);

但我不想使用 iframe，因为它有未来的限制，我必须重定向到银行页面，当它返回时，整个应用程序都是 iframed，我不想要

接下来我尝试使用 document.write 如下

  const html = `<html>
        <head>
      
        </head>
          <body>
          ${styleScriptText}
         
          </body>
    </html>`;
document.open("text/html", "replace");
document.write(html);
document.close();

但是上述方法的问题是我遇到了以下错误 通过 document.write

调用了一个阻止解析器的跨站点（即不同的 eTLD+1）脚本 https:externalscript.js

如果我采取任何其他方法 $(document).ready 脚本中的函数不会执行。尝试了几乎所有的东西，但无法弄清楚如何加载和来自 api 响应的运行脚本。这里的目标是我需要获取一个脚本作为字符串并将其加载到 html 并执行每个脚本文件

Answer 1

这应该有效，使用它需要您自担风险：

const styleScriptText =
  '<style type="text/css">body {background: #000}</style><script type="text/javascript">alert("OK")</' + 'script' + '>';

const insertStyleScriptText = () => {
    const div = document.createElement('div');
    div.innerHTML = styleScriptText;
    div.childNodes.forEach(child => {
        document.head.appendChild(child.cloneNode(true));
        if (child.tagName === 'SCRIPT')
            eval(child.textContent);
    });
};

<button onclick="insertStyleScriptText()">insert StyleScriptText</button>

动态添加脚本标签并执行 $(document).ready，无需使用 iframe 或 document.write

Dynamically add script tag and execute $(document).ready, without using iframe or document.write

html

javascript

api

payment

angular