HTML中iframe刷新父页面的JS脚本编写教程-html教程-PHP中文网

iframe中parent.location.reload()无反应主因是跨域导致的同源策略限制；同源时可直接调用，跨域时须用window.postmessage()通信，由父页校验origin后主动刷新。

html中iframe刷新父页面的js脚本编写教程

iframe里调用 `parent.location.reload()` 为什么没反应

多数情况是父页面启用了 same-origin policy 限制，而 iframe 加载的是跨域页面（比如嵌入第三方后台、外链报表页），此时 parent 对象在 iframe 内不可访问，直接报 Blocked a frame with origin ... from accessing a cross-origin frame 错误。

解决前提是：你**能控制父页面和 iframe 页面的代码**。否则无法绕过浏览器安全策略。

同源时（协议、域名、端口完全一致），parent.location.reload() 可直接用
跨域但双方可协作时，必须用 window.postMessage() 主动通信，由父页面监听并执行刷新
不要尝试 parent.window.location 或 top.location 等变体写法——只要跨域，一律拒绝访问

iframe 向父页面发送刷新请求的正确写法（`postMessage`）

iframe 页面中触发刷新，本质是“发消息”，不是“直接操作”。父页面收到合法来源的消息后，自行决定是否刷新。

iframe 内 JS 示例：

Miller CSV TSV JSON 数据处理器

Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。

下载

// 假设父页面地址是 https://example.com/dashboard.html
window.parent.postMessage({ type: 'REFRESH_PARENT' }, 'https://example.com');

注意第二参数必须是父页面确切的 origin（不含 path），不能写 *（不安全且部分浏览器已禁用）。

如果父页面用 http:// 而 iframe 用 https://，即使域名相同也属跨域，postMessage 仍需指定明确 origin
消息体建议带 type 字段，方便父页面做类型判断，避免误响应其他来源消息
若 iframe 是动态插入的（如通过 document.createElement('iframe')），需等 iframe.contentWindow 可用后再发消息

父页面监听并安全执行 `location.reload()`

父页面需在全局注册 message 事件监听器，并严格校验消息来源与内容。

父页面 JS 示例：

window.addEventListener('message', function (e) {
  // 只接受可信来源
  if (e.origin !== 'https://embedded.example.com') return;
  // 只处理指定类型
  if (e.data?.type === 'REFRESH_PARENT') {
    location.reload();
  }
});

e.origin 比 e.source 更可靠，后者在某些旧版 Safari 中可能为 null
不要省略 e.data?.type 的可选链判断，防止 e.data 为 null 或 undefined 导致报错中断
如果父页面有未保存表单，location.reload() 会丢弃所有改动，建议加提示或改用 location.href = location.href（效果相同但更可控）

调试时常见错误和验证点

发了消息但父页面没刷新？先确认这几点：

检查浏览器控制台是否有 Failed to execute 'postMessage' on 'DOMWindow' —— 多半是 iframe 还没加载完就发消息，加 iframe.onload 回调再发
父页面监听器是否在 iframe 加载前就注册好了？监听器必须提前挂载，否则错过首条消息
用 console.log(e) 打印收到的 message，确认 e.origin 和 e.data 是否符合预期（注意：跨域时 e.source 不可读取 iframe 的 URL）
如果父页面本身是 SPA（如 Vue/React），location.reload() 会强制整页重载，可能不如 router.push(router.currentRoute.value.fullPath) 平滑——这点容易被忽略