不使用iframe加载外部HTML与JS 无法调用函数是否为浏览器安全限制

核心结论 #

这个需求可以正常实现，你目前遇到的函数无法调用问题不是浏览器安全拦截直接导致的，是innerHTML的固有特性导致的：浏览器默认不会执行通过innerHTML插入的<script>标签代码，你看到的JS文件加载完成是误判，实际脚本根本没有被解析执行，自然找不到内部定义的函数。

可能遇到的安全限制 #

只有当你请求的myURL和你当前站点不同源，且目标站点没有配置CORS规则允许你的域名跨域访问时，fetch请求才会被浏览器同源策略直接拦截，这种情况前端无法单独处理，需要通过你的服务端做代理转发请求拉取内容。

修复方案 #

你需要手动提取拉取到的HTML内容中的所有script标签，单独创建script元素加载执行，步骤如下：

• 从拉取到的HTML文本中筛选所有<script>标签，区分带src的外部脚本和内联脚本
• 按原有顺序逐个创建script元素，外部脚本设置src属性，内联脚本把内容赋值给textContent属性
• 监听脚本的加载完成事件，所有脚本执行完成后再调用目标函数

示例修复代码 #

window.onload = async function () {
    const response = await fetch(myURL);
    const body = await response.text();
    const dv = document.createElement('div');
    dv.innerHTML = body;
    // 提取所有script标签
    const scripts = dv.querySelectorAll('script');
    // 按顺序加载脚本
    for (const oldScript of scripts) {
        const newScript = document.createElement('script');
        // 复制原有script的所有属性
        Array.from(oldScript.attributes).forEach(attr => {
            newScript.setAttribute(attr.name, attr.value);
        });
        // 处理内联脚本
        if (!oldScript.src) {
            newScript.textContent = oldScript.textContent;
        }
        // 替换原有script标签触发执行
        oldScript.parentNode.replaceChild(newScript, oldScript);
        // 外部脚本等待加载完成再处理下一个，保证依赖顺序
        if (oldScript.src) {
            await new Promise(resolve => newScript.onload = resolve);
        }
    }
    document.body.appendChild(dv);
    // 此处可正常调用加载完成的脚本内定义的函数
}();

内容的提问来源于stack exchange，提问作者Thiago Custodio