Question

我正在尝试制作SPA网站。

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

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

结构基本上我想做的是这样：

基本模板：它具有一个导航栏，可将AJAX内容加载到名为ajaxContent的div上，该链接包含产品，常见问题解答和关于我们并在div products.html上加载各自的模板ajaxContent...。

产品模板：这是产品目录，还有另一个带有类别名称的导航栏，它的行为应类似于基本模板中的nav：将AJAX内容加载到名为{的div中{1}}，但是我无法在此模板中提出AJAX请求，因为AjaxCatalog标签不起作用。

我正在用Flask来做。

谢谢！

Answer 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
});

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

1 个答案: