如何将远程HTML加载到div并执行其中的JavaScript函数myFunction？

我之前也碰到过类似的场景，用<object>加载外部HTML后，它会创建一个独立的浏览上下文，所以主页面没法直接调用里面的函数，得先拿到这个上下文的引用才行，下面分两种常见情况给你解决方案：

情况1：远程页面和主页面同源（协议、域名、端口完全一致） #

这种情况浏览器没有跨域限制，直接获取object的contentWindow就能调用函数，步骤很清晰：

1. 给<object>加个id，方便后续定位元素
2. 监听object的load事件（必须等页面加载完成才能访问里面的函数）
3. 通过contentWindow拿到远程页面的window对象，直接调用目标函数

主页面完整代码示例 #

<div id="main_id"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function init(){
    var url = "remote.html";
    // 给object添加id属性，方便后续监听事件
    var objectHtml = '<object id="remote_obj" type="text/html" style="width:100%;height:100%;" data='+url+' ></object>';
    $("#main_id").html(objectHtml);
    
    // 监听object加载完成事件，确保远程页面已加载完毕
    $("#remote_obj").on("load", function() {
        // 获取远程页面的window上下文
        const remoteWindow = this.contentWindow;
        // 直接调用远程页面的myFunction
        remoteWindow.myFunction();
    });
}
$(document).ready(init);
</script>

情况2：远程页面和主页面跨域 #

如果两个页面不在同一个域名下，浏览器的同源策略会阻止你直接访问contentWindow，这时候需要用postMessage来实现跨域通信：

第一步：修改远程页面（remote.html）的代码 #

添加message事件监听，接收主页面的调用指令：

<!DOCTYPE html>
<html>
<body>
<div> Some content</div>
<script>
function myFunction(){
    alert("Hello");
}

// 监听主页面发来的消息
window.addEventListener("message", function(event) {
    // 建议验证发送方的origin，避免恶意调用，比如：
    // if (event.origin !== "https://你的主页面域名.com") return;
    
    // 判断消息内容，触发对应函数
    if (event.data === "triggerMyFunction") {
        myFunction();
    }
});
</script>
</body>
</html>

第二步：修改主页面的代码 #

通过postMessage给远程页面发送调用信号：

<div id="main_id"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function init(){
    var url = "remote.html";
    var objectHtml = '<object id="remote_obj" type="text/html" style="width:100%;height:100%;" data='+url+' ></object>';
    $("#main_id").html(objectHtml);
    
    $("#remote_obj").on("load", function() {
        const remoteWindow = this.contentWindow;
        // 发送消息给远程页面，第二个参数建议填具体域名（比如"https://remote-domain.com"），*表示允许任意域名，安全性稍低
        remoteWindow.postMessage("triggerMyFunction", "*");
    });
}
$(document).ready(init);
</script>

注意事项 #

• 确保远程页面里的myFunction是全局函数（你的现有代码已经满足，函数直接定义在script里，默认挂在window对象上）
• 跨域场景下，一定要验证event.origin，防止来自未知域名的恶意消息调用你的函数

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