如何在 AJAX 请求上加载脚本？答案

【问题标题】：How to load Scripts on AJAX requests?如何在 AJAX 请求上加载脚本？
【发布时间】：2018-09-27 01:57:57
【问题描述】：

我正在尝试制作一个 SPA 网站。

显然，如果我在元素的 innerHTML 上使用 AJAX 加载内容，AJAX 内容中的script 标记将不起作用。

问题是我需要在 AJAX 内容中发出另一个 AJAX 请求。我不能只使用基本模板的 JavaScript 代码，因为在初始页面加载时，我将事件绑定到元素，没有加载 AJAX 内容，因此没有绑定。

结构基本上我想做的是：

基本模板： 它有一个导航栏，用于在名为 ajaxContent 的 div 上加载 AJAX 内容，链接 Products、FAQ 和关于我们在 div ajaxContent 上加载相应的模板 products.html...。

产品模板： 这是产品目录，有另一个带有类别名称的导航栏，它的行为应该类似于基本模板中的导航：在名为 @ 的 div 中加载 AJAX 内容987654325@，但我无法在此模板中发出 AJAX 请求，因为 script 标记不起作用。

我正在使用 Flask 进行此操作。

谢谢！

【问题讨论】：

标签： javascript html ajax flask

【解决方案1】：

您还没有展示如何加载 HTML - 实际上您根本没有展示任何代码

但是，如果您的 AJAX 将 HTML 作为字符串获取，则可以使用以下

const loadHtml = (text, dest) => {
    const p = new DOMParser();
    const doc = p.parseFromString(text, 'text/html');
    const frag = document.createDocumentFragment();
    while (doc.body.firstChild) {
        frag.appendChild(doc.body.firstChild);
    }
    const ret = Promise.all([].map.call(frag.querySelectorAll('script'), script =>
        new Promise(res => {
            const scriptParent = script.parentNode || frag;
            const newScript = document.createElement('script');
            if (script.src) {
                newScript.addEventListener('load', e => {
                    res({src:script.src, loaded: true});
                });
                newScript.addEventListener('error', e => {
                    res({src:script.src, loaded:false});
                });
                newScript.src = script.src;
            } else {
                newScript.textContent = script.textContent;
                res({src:false, loaded:true});
            }
            scriptParent.replaceChild(newScript, script);
        })
    ));
    dest = document.querySelector(dest);
    if (replace) {
        dest.innerHTML = '';
    }
    dest.appendChild(frag);
    return ret;
};

用法

let yourHTMLtext = '....'; // this would be the result of your AJAX call
loadHTML(yourHTMLtext, '#ajaxContent').then(results => {
    // at this point, all scripts have been loaded, if that's something you need to know
});

【讨论】：