動態添加腳本標簽並執行 $(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();

但是上述方法的問題是我遇到了錯誤A parser-blocking, cross site (ie different eTLD+1) script, https:externalscript.js, 通過 document.write 調用

如果我采取任何其他方法$(document).ready function 在腳本中不會執行。 幾乎嘗試了所有方法，但無法弄清楚如何加載和運行來自 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

問題描述

1 個解決方案

解決方案1
0 已采納 2021-03-16 11:17:16

動態添加腳本標簽並執行 $(document).ready，不使用 iframe 或 document.write

問題描述

1 個解決方案

解決方案1 0 已采納 2021-03-16 11:17:16

解決方案1
0 已采納 2021-03-16 11:17:16