iframe父子页面传递参数

在父子页面之间传递参数，可以使用 iframe 的 postMessage 方法。

在父页面中，使用 JavaScript 获取到 iframe 元素，并使用 postMessage 方法发送消息给子页面，如下所示：

var iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage('参数值', '子页面URL');

在子页面中，监听 message 事件，并处理接收到的参数，如下所示：

window.addEventListener('message', function(event) {
  if (event.origin === '父页面URL') {
    var 参数值 = event.data;
    // 处理接收到的参数
  }
});

请注意替换代码中的 `myIframe`、`子页面URL` 和 `父页面URL` 分别为你的 iframe 的 id、子页面 URL 和父页面 URL。

这样，父子页面之间就可以通过 postMessage 方法传递参数了。

相关问题

网el-iframe的页面传递参数

网页之间传递参数可以使用URL传参或者使用HTML5中的postMessage方法。

1. URL传参

在URL后面加上参数，例如：

http://www.example.com/page.html?param1=value1&param2=value2

在接收页面中可以使用JavaScript获取参数，例如：

var params = {};
window.location.search.substring(1).split('&').forEach(function(item) {
  var pair = item.split('=');
  params[pair[0]] = decodeURIComponent(pair[1] || '');
});
console.log(params.param1); // 输出value1
console.log(params.param2); // 输出value2

2. postMessage方法

在发送页面中使用postMessage方法发送消息，例如：

var otherWindow = window.frames['iframeName'];
otherWindow.postMessage('hello', 'http://www.example.com');

在接收页面中监听message事件，例如：

window.addEventListener('message', function(event) {
  if (event.origin === 'http://www.example.com') {
    console.log(event.data); // 输出hello
  }
});

需要注意的是，postMessage方法只能在同源的页面之间传递数据。如果要在不同源的页面之间传递数据，需要使用跨域通信技术，例如JSONP或者CORS。

iframe父子页面跨域

iframe父子页面跨域问题是指在Web开发中，当一个页面（父页面）中嵌套了另一个页面（子页面）的iframe元素，并且两个页面的域名或协议或端口不一致时，就会出现跨域问题。

由于浏览器的同源策略，子页面无法直接访问父页面的内容，也无法与父页面进行通信。这是为了保护用户隐私和安全。但是，有时候我们可能需要在父子页面之间进行数据交互或调用父页面的方法。

解决跨域问题的常见方法有以下几种：

1. 使用postMessage API：在子页面中使用postMessage方法向父页面发送消息，父页面监听message事件来接收消息。这种方式可以实现跨域通信，但需要在两个页面中编写额外的代码。

2. 设置document.domain：如果两个页面的域名只是在子域名上有差异（例如，父页面为example.com，子页面为sub.example.com），可以在两个页面中都设置document.domain为相同的主域名（例如，example.com）。这样浏览器会认为它们同源，从而解决跨域问题。

3. 使用window.name或location.hash：通过修改window.name或location.hash来传递数据。这种方式可以绕过同源策略限制，但只适用于传递较小的数据量。

4. 使用代理页面：在同源的页面中设置一个代理页面，该代理页面作为中间人，用于转发父子页面之间的数据。

需要根据具体的场景和需求选择适合的解决方案来解决iframe父子页面跨域问题。