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>

可以使用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
  })
}

比较简单的就是把id存到本地或者直接给他传过去


1.在iframe子页面中获取父页面的元素：
    a>window.parent.document这个是获取父页面document中的对象；
    b>如果要获取父页面js中的方法：window.parent.xxxx（）；xxxx()为方法；这种是不是可以？

代码如下：
父页面声明函数

function getA(){
  var id = 100;  
   return  id;
}

iframe页面调用父页面函数

function getWinA()
{
var a = document.parentWindow.parent.getA();
alert(a);  //100
}

该回答内容部分引用GPT，GPT_Pro更好的解决问题
答：在父页面中，可以通过在iframe的src属性上添加参数的方式将id传递到子页面。例如，父页面HTML代码如下：

<body>
    <button id="btn1">按钮1</button>
    <button id="btn2">按钮2</button>
    <iframe src="subpage.html?id=123" id="ifr"></iframe>
</body>

然后在父页面JS代码中，可以通过监听按钮的点击事件，获取不同的id，然后将id值传递到子页面：

<script>
    document.getElementById('btn1').addEventListener('click', function(){
        document.getElementById('ifr').src = 'subpage.html?id=456';
    }, false);

    document.getElementById('btn2').addEventListener('click', function(){
        document.getElementById('ifr').src = 'subpage.html?id=789';
    }, false);
</script>

在子页面中，可以通过获取url中的参数的方式获取到id的值：

<script>
    function getQueryString(name) {  //获取url中的参数值的函数
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");  //定义正则表达式 
        var r = window.location.search.substr(1).match(reg);   //匹配目标参数 
        if (r != null) return unescape(r[2]); return null; //返回参数值 
    } 

    var id = getQueryString("id");  //获取url中的参数值 

    //根据id值做出相应动作。。。。。。  
</script>

如果回答有帮助，望采纳。