我的 HTML 页面加载包含 Javascript 的外部 HTML。我如何执行这个 Javascript

Question

我有一个用例，其中 html 页面需要加载外部 html 文件的内容。外部 html 文件包含 html 元素和 Javascript 代码。

我想同时使用 html 和 Javascript。

我可以加载和渲染 html 内容，但是如何在外部文件中执行 Javascript？在这个例子中我想调用 staticLoaded

注意 - 我不想使用任何框架，理想情况下希望在原生 js 中实现这一点。

HTML 文件:

<html>
   <body>
     <div id="content-here"></div>
     <script>
      function main(){    
        fetch('/file-location/')
        .then(function (response) {
          return response.text();
        })
        .then(function (html) {
          const contentHereDiv = document.getElementById("content-here");
          contentHereDiv.innerHTML = html;
        });
     }
     main();
     </script>
     </body>
</html>

外部文件：

<html>
    <body>
       <div>Hello world</div>
       <script>
          function staticLoaded(){
              console.log('Hello world');
          }
       </script>
    </body>
</html>

<html>

<body>
  <div id="content-here">
  </div>
  <script>
    function main() {
      fetch('/example-page.html')
        .then(function(response) {
          return response.text();
        })
        .then(function(html) {
          const contentHereDiv = document.getElementById("content-here");
          contentHereDiv.innerHTML = html;
        }).catch(function(err) {
          console.warn('Something went wrong.', err);
        });
    }
    main();
  </script>
</body>
</html>

以下建议。我得出以下解决方案。

<html>
<body>
  <div id="content-here">  
  </div>
  <script>
    function main(){    
      fetch('/example.html')
      .then(function (response) {
          console.log('respond');
          return response.text();
      })
      .then(function (html) {
        const contentHereDiv = document.getElementById("content-here");
        contentHereDiv.innerHTML = html;
        console.log('render content');
      })
      .then(() => {
        const staticScript = document.getElementById("static-js").innerHTML;    
        const scriptElement = document.createElement('script');
        scriptElement.setAttribute('type', 'text/javascript');
        scriptElement.innerText = staticScript;
        const head = document.getElementsByTagName('head')[0];
        head.appendChild(scriptElement);
        console.log('move script to head');
      })
      .then(() => {
        console.log('call function');
        staticLoaded();
      })
      .catch(function (err) {
        console.warn('Something went wrong.', err);
        console.log(err.message);
      });
    }

    main();
  </script>
</body>
</html>

Answer 1

我正在处理与支付提供商相同的问题。我用类似的东西解决了它。您需要从外部文件中提取脚本标签，稍后您可以使用以下代码。

const data = '<script type="text/javascript">console.log("Hello!")</script>';
const cleanedData = data.split('<script type="text/javascript">').join('').split('</script>').join('\n');
const head = document.getElementsByTagName('head')[0];
const scriptElement = document.createElement('script');
scriptElement.setAttribute('type', 'text/javascript');
scriptElement.innerText = cleanedData;
head.appendChild(scriptElement);

确保'data'变量来自某个地方安全!

我的 HTML 页面加载包含 Javascript 的外部 HTML。我如何执行这个 Javascript

My HTML page loads external HTML containing Javascript. How do I execute this Javascript

html

javascript

fetch