点击按钮时用主页面textarea更新iframe中div内容的问题

你已经搞定了页面加载时的更新逻辑，但点击按钮没效果的核心原因很明确：原来的代码只在iframe第一次加载完成时执行了更新操作，之后点击按钮时，iframe早就加载完毕了，load事件不会再触发，所以那段更新div的代码根本没跑起来——不过你能拿到textarea的最新值，说明获取输入的逻辑是完全没问题的。

下面给你调整后的解决方案，核心是把更新逻辑封装成可重复调用的函数，不管页面加载还是按钮点击都能轻松触发：

第一步：封装通用的更新函数 #

先写一个专门处理iframe内容更新的函数，这样不管什么时候需要更新，直接调用它就行：

function updateIframeContent() {
  // 获取textarea的最新文本内容
  const inputText = document.getElementById("myTextarea").value;
  // 获取iframe元素
  const iframe = document.getElementById("prev");
  
  // 确保iframe已加载完成，且是同域页面（跨域无法操作DOM）
  if (iframe.contentDocument) {
    // 找到iframe里的#demo元素，替换内容（如果要追加就用append）
    const targetDiv = iframe.contentDocument.getElementById("demo");
    targetDiv.innerHTML = inputText;
    // 如果是要追加内容而不是替换，改成下面这行：
    // targetDiv.append(inputText);
  }
}

第二步：绑定页面加载和按钮点击事件 #

把页面加载时的初始化逻辑和按钮点击事件都关联到这个函数上：

$(function() {
  const $iframe = $('#prev');
  
  // 页面加载时，等待iframe加载完成后执行一次初始化更新
  $iframe.on('load', function() {
    updateIframeContent();
  });
  
  // 给按钮绑定点击事件，点击时触发更新
  $('#updateBtn').on('click', function() {
    updateIframeContent();
    // 保留你的测试alert也完全没问题
    alert(document.getElementById("myTextarea").value);
  });
});

关键注意事项 #

• 同域限制：必须保证iframe的页面和主页面是同一个域名（包括协议、域名、端口都完全一致），否则浏览器的跨域安全规则会阻止你修改iframe内的DOM，这是浏览器的安全机制，没法绕过。
• 替换vs追加：如果你是想把textarea的内容替换掉#demo里的原有内容，用innerHTML = inputText；如果是要在原有内容后面追加，就用append(inputText)或者innerHTML += inputText。
• 为什么原来的代码不行？因为$iframe.load()只会在iframe第一次加载完毕时触发一次，之后点击按钮时这个事件不会再触发，所以里面的更新代码根本没执行——封装成函数后，就能在需要的时候主动调用啦。

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