real47LEBJ 2023-02-23 16:37 采纳率: 95.7%
浏览 64
已结题

JS中父页面如何向被iframe嵌套的子页面传值

前提：在一个index页面中使用了iframe，点击不同的按钮会动态改变iframe的src，从而实现页面的切换。
问题：在index页面中接受到了一个参数，记为id。被iframe嵌套的页面如何获取到这个id。（index和被嵌套的页面是父子关系）


<body id="body-pd">
    <iframe class="if" src="./programStatus/equipStatus.html" scrolling="no" frameborder="0" height="1000vh" width="99%"
        id="mainFrame" style="margin-top: -1%;"></iframe>
</body>

<script>
    document.getElementById("logIndex").addEventListener("click", function () {
        ifr.src = "./logManage/logIndex.html";
    }, false);
    document.getElementById("logList").addEventListener("click", function () {
        ifr.src = "./logManage/logList.html";
    }, false);

    document.getElementById("applicationSetting").addEventListener("click", function () {
        ifr.src = "./indexSetting/applicationSetting.html";
    }, false);
</script>
  • 写回答

6条回答 默认 最新

  • allyfireshen 2023-02-23 17:06
    关注

    可以使用postMessage的方式，在父页面中传值，子页面中监听接收：
    其中里面的*表示允许传递和接收的域名， * 表示不限制域名
    父页面：

    
document.getElementById("logIndex").addEventListener("click", function () {
  ifr.src = "./logManage/logIndex.html";
  document.getElementById("logIndex").contentWindow.postMessage({id : 1}, '*');
}, false);
document.getElementById("logList").addEventListener("click", function () {
  ifr.src = "./logManage/logList.html";
  document.getElementById("logList").contentWindow.postMessage({id : 2}, '*');      
}, false);
 
document.getElementById("applicationSetting").addEventListener("click", function () {
  ifr.src = "./indexSetting/applicationSetting.html";
  document.getElementById("applicationSetting").contentWindow.postMessage({id : 3}, '*');
}, false);

    子页面：

    
window.onload = function () {
  window.addEventListener("message", function (e) => {
    let data = e.data;
    let id = data.id
  })
}
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(5条)

报告相同问题？

问题事件

  • 系统已结题 3月6日
  • 已采纳回答 2月26日
  • 创建了问题 2月23日

悬赏问题

  • ¥20 java在应用程序里获取不到扬声器设备
  • ¥15 echarts动画效果的问题，请帮我添加一个动画。不要机器人回答。
  • ¥60 许可证msc licensing软件报错显示已有相同版本软件，但是下一步显示无法读取日志目录。
  • ¥15 Attention is all you need 的代码运行
  • ¥15 一个服务器已经有一个系统了如果用usb再装一个系统，原来的系统会被覆盖掉吗
  • ¥15 使用esm_msa1_t12_100M_UR50S蛋白质语言模型进行零样本预测时，终端显示出了sequence handled的进度条，但是并不出结果就自动终止回到命令提示行了是怎么回事：
  • ¥15 前置放大电路与功率放大电路相连放大倍数出现问题
  • ¥30 关于<main>标签页面跳转的问题
  • ¥80 部署运行web自动化项目
  • ¥15 腾讯云如何建立同一个项目中物模型之间的联系