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日

悬赏问题

  • ¥15 ikuai客户端多拨vpn,重启总是有个别重拨不上
  • ¥20 关于#anlogic#sdram#的问题,如何解决?(关键词-performance)
  • ¥15 相敏解调 matlab
  • ¥15 求lingo代码和思路
  • ¥15 公交车和无人机协同运输
  • ¥15 stm32代码移植没反应
  • ¥15 matlab基于pde算法图像修复,为什么只能对示例图像有效
  • ¥100 连续两帧图像高速减法
  • ¥15 如何绘制动力学系统的相图
  • ¥15 对接wps接口实现获取元数据