iframe传递参数

### 如何在HTML中通过iframe传递参数给嵌入页面

#### 使用URL查询字符串传递参数
一种常见的方式是在`src`属性中使用URL查询字符串来传递参数。当定义`<iframe>`标签时，在其`src`属性后面附加问号以及键值对形式的参数列表，多个参数之间用&分隔。

例如，如果希望向子页面传递名为`name`和`age`两个参数，则可以这样设置：

<iframe id="childFrame" src="frame.html?name=JohnDoe&age=30"></iframe>

这种方式简单直观，适用于大多数场景[^1]。

#### JavaScript获取并解析参数
对于接收端即被加载到iframe中的HTML文档来说，可以通过JavaScript读取这些参数。下面是一个简单的例子展示如何实现这一点：

function getQueryVariable(variable){
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0;i<vars.length;i++) {
        var pair = vars[i].split("=");
        if(pair[0] === variable){return pair[1];}
    }
    return(false);
}

// 获取 name 参数
console.log(getQueryVariable('name')); // 输出 JohnDoe

这段脚本会遍历当前页面地址栏后的所有GET请求参数，并返回指定名称对应的值[^3]。

#### 利用postMessage API安全通信
除了上述基于URL的方法外，还可以利用现代浏览器支持的`window.postMessage()`API来进行跨域消息发送与接收。这种方法更加灵活且安全性更高，尤其适合处理不同源之间的数据交换需求。

父窗口调用子窗口内的函数并向其传送信息如下所示：

var iframeWindow = document.getElementById('childFrame').contentWindow;
iframeWindow.postMessage({key:'value'}, 'https://example.com');

而在子窗口内部监听来自父窗口的消息事件则可通过以下方式完成：

window.addEventListener('message', function(event) {
  console.log(event.data); // 处理接收到的数据
  
  // 安全检查：验证消息来源
  if (event.origin !== "http://parent-site.com") { 
      return; 
  }

}, false);

此方法允许更复杂的数据结构作为负载传输，并提供了更好的隔离机制以保护双方免受恶意攻击的影响[^2]。