我如何使用 fetch api 用它的 javascript 加载 html 页面？

Question

我正在尝试使用 fetch API 加载带有其 JavaScript 脚本的 HTML 页面

我可以使用 ajax 和 JQuery See here<\/a>来加载页面，但是是否可以使用 fetch API？

这是一个代码演示：<\/strong>

我假设你在 localhost 上运行它

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>fetch API</title>
</head>
<body>
    <p>index page</p>
    <div id="content">

    </div>

<script>
    fetch('./page.html')
        .then(data => data.text())
        .then(html => document.getElementById('content').innerHTML = html);
</script>
</body>
</html>

Answer 1

请参考stackoverflow将脚本插入到 innerhtml 中。

我已经完成了 index.html 中的更改，它对我有用。 请找到下面的代码

  fetch('./page.html')
.then(function (data) {
  return data.text();
})
.then(function (html) {
  document.getElementById('content').innerHTML = html;
  var scripts = document.getElementById("content").querySelectorAll("script");
  for (var i = 0; i < scripts.length; i++) {
    if (scripts[i].innerText) {
      eval(scripts[i].innerText);
    } else {
      fetch(scripts[i].src).then(function (data) {
        data.text().then(function (r) {
          eval(r);
        })
      });

    }
    // To not repeat the element
    scripts[i].parentNode.removeChild(scripts[i]);
  }
});

Answer 2

我发现这里使用 eval() 的另一个答案很有帮助，但遇到了一个问题，因为我的动态加载的内容正在导入一个外部脚本，在 Firefox 中给出 CORS 警告，例如：

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

因此，我对其进行了一些调整，以在不使用 eval() 的情况下注入脚本标签，以允许来自其他域的外部脚本以及嵌入式脚本。 然后我修改为按照定义的顺序加载脚本，在加载下一个之前等待加载完成 - 这是因为我的页面上的嵌入脚本依赖于正在加载的外部脚本的功能。

fetch("/mypage.html").then(response => {
    return response.text();
}).then(data => {

    const app = document.getElementById("app");
    app.innerHTML = data;

    // Load scripts in the order they are defined
    // Note that inserting scripts into an element using innerHTML doesnt work - hence this logic
    var scripts = app.querySelectorAll("script");

    if (scripts !== null && scripts.length > 0) {
        var loadScript = index => {
            if (index < scripts.length) {
                var newScript = document.createElement("script");

                if (scripts[index].innerText) {
                    var inlineScript = document.createTextNode(scripts[index].innerText);
                    newScript.appendChild(inlineScript);
                }
                else {
                    newScript.src = scripts[index].src;
                }
                scripts[index].parentNode.removeChild(scripts[index]);
                newScript.addEventListener("load", event => loadScript(index + 1));
                newScript.addEventListener("error", event => loadScript(index + 1));
                app.appendChild(newScript);
            }
        }

        loadScript(0); // Start loading script 0. Function is recursive to load the next script after the current one has finished downloading.
    }
}).catch(err => {
    console.warn('Something went wrong.', err);
});

Answer 3

我在 Github 上发布了这个小型Fetch 数据加载器，它完全符合您的要求。

loadData()函数将获取的内容加载到目标容器中，然后运行其脚本。 它也接受回调。

此处提供演示： https ://www.ajax-fetch-data-loader.miglisoft.com

这是一个示例代码：

<script>
document.addEventListener('DOMContentLoaded', function(event) {
    fetch('ajax-content.php')
    .then(function (response) {
        return response.text()
    })
    .then(function (html) {
        console.info('content has been fetched from data.html');
        loadData(html, '#ajax-target').then(function (html) {
            console.info('I\'m a callback');
        })
    }).catch((error) => {
        console.log(error);
    });
});
</script>

我如何使用 fetch api 用它的 javascript 加载 html 页面？

问题描述

3 个解决方案

解决方案1
0 已采纳 2019-09-18 08:29:28

解决方案2
0 2020-11-17 16:01:20

解决方案3
0 2022-01-29 18:09:53

我如何使用 fetch api 用它的 javascript 加载 html 页面？

问题描述

3 个解决方案

解决方案1 0 已采纳 2019-09-18 08:29:28

解决方案2 0 2020-11-17 16:01:20

解决方案3 0 2022-01-29 18:09:53

解决方案1
0 已采纳 2019-09-18 08:29:28

解决方案2
0 2020-11-17 16:01:20

解决方案3
0 2022-01-29 18:09:53