js调用iframe子页面的方法和变量

要在父页面中调用子页面的方法和变量，可以使用以下几种方式：

1. 使用iframe.contentWindow属性获取子页面的window对象，然后调用该对象的方法或访问该对象的属性。

例如，假设iframe的id为"myFrame"，子页面中有一个名为"myFunction"的方法和一个名为"myVariable"的变量，可以使用以下代码来调用它们：

var iframe = document.getElementById("myFrame");
var childWindow = iframe.contentWindow;
childWindow.myFunction();
var myValue = childWindow.myVariable;

2. 在子页面中定义一个全局变量或函数，并在父页面中通过iframe对象的contentWindow属性访问它们。

例如，子页面中定义了一个名为"myFunction"的全局函数和一个名为"myVariable"的全局变量，可以使用以下代码在父页面中访问它们：

var iframe = document.getElementById("myFrame");
var childWindow = iframe.contentWindow;
childWindow.myFunction();
var myValue = childWindow.myVariable;

3. 在父页面中使用postMessage API向子页面发送消息，并在子页面中监听该消息，并根据消息内容执行相应的操作。

例如，在父页面中发送消息：

var iframe = document.getElementById("myFrame");
var childWindow = iframe.contentWindow;
childWindow.postMessage("hello", "http://example.com");

在子页面中监听消息：

window.addEventListener("message", function(event) {
  if (event.origin == "http://example.com" && event.data == "hello") {
    // 执行相应的操作
  }
});

需要注意的是，在使用postMessage API时需要注意安全性，防止被恶意代码利用。