求助：iframe内的jQuery代码无法修改外部div内容

这个问题的核心是浏览器的同源策略限制，加上你代码里的DOM上下文错误导致的。我来一步步帮你搞定：

一、先理清核心问题：DOM上下文误区 #

你原来的代码里，$("#TextData")是在iframe自己的文档上下文里查找元素，但#TextData明明是在父页面里的，所以自然找不到。再加上浏览器的同源安全限制，直接操作肯定失败，我们分两种场景处理：

场景1：iframe与父页面同源（协议、域名、端口完全一致） #

这种情况可以直接通过parent对象访问父页面的资源，修改代码如下：

父页面HTML：

<a id="TextData">Call function which is inside of Iframe</a>
<!-- 注意：别把脚本直接写在iframe标签内部，用src指向同源的iframe页面 -->
<iframe id="preview-frame" src="your-iframe-content.html"></iframe>

iframe页面（your-iframe-content.html）的脚本：

$(function() {
  setTimeout(function(){
    alert("hello");
    // 关键：用parent.$访问父页面的jQuery，或者直接操作父页面DOM
    parent.$("#TextData").html("update with this text");
    
    // 要是不想依赖父页面的jQuery，也可以用原生JS：
    // window.parent.document.getElementById("TextData").innerHTML = "update with this text";
  }, 1000);
});

这样就能正确修改父页面的#TextData内容了。

场景2：iframe与父页面不同源（跨域） #

浏览器的同源策略会禁止直接跨域操作DOM，这时候得用postMessage做安全的跨文档通信：

父页面添加消息监听：

$(function() {
  window.addEventListener("message", function(event) {
    // 重要：一定要验证消息来源，防止恶意请求，替换成你的iframe实际域名
    if (event.origin !== "https://your-iframe-domain.com") return;
    
    // 根据消息类型处理更新逻辑
    if (event.data.type === "updateText") {
      $("#TextData").html(event.data.content);
    }
  });
});

iframe页面发送消息：

$(function() {
  setTimeout(function(){
    alert("hello");
    // 发送消息给父页面，第二个参数建议写具体父域名（*表示任意，不安全）
    window.parent.postMessage({
      type: "updateText",
      content: "update with this text"
    }, "https://your-parent-domain.com");
  }, 1000);
});

二、修复你原来的代码错误 #

你之前把<script>直接写在<iframe>标签内部是无效的，iframe的内容需要通过src属性加载外部页面，或者用srcdoc（但srcdoc的文档仍要遵循同源策略）。

总结 #

• 同源场景：用parent对象直接访问父页面的DOM/jQuery
• 跨域场景：用postMessage做安全的跨文档通信
• 确保操作时父页面的#TextData元素已经存在（你的setTimeout其实已经做到了，也可以监听父页面的load事件更可靠）

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