iframe参数传递的方法
在HTML中，<iframe>标签用于嵌入另一个网页，我们需要在父页面中向子页面传递参数，以便子页面可以根据这些参数执行相应的操作，如何实现iframe参数传递呢？本文将介绍两种常用的方法：通过URL参数传递和通过JavaScript传递。
1、通过URL参数传递
方法一：使用查询字符串(query string)
在父页面中，可以通过修改<iframe>标签的src属性来传递参数，假设我们有一个子页面child.html,我们可以在父页面中这样设置<iframe>标签的src属性：
<iframe src="child.html?param1=value1¶m2=value2"></iframe>
在子页面child.html中，可以使用JavaScript来获取这些参数：
function getQueryString(name) {
const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
const r = window.location.search.substr(1).match(reg);
if (r != null) {
return decodeURIComponent(r[2]);
}
return null;
}
const param1 = getQueryString('param1');
const param2 = getQueryString('param2');
console.log('param1:', param1); // 输出 "param1: value1"
console.log('param2:', param2); // 输出 "param2: value2"
方法二：使用锚链接(anchor link)
在父页面中，可以通过修改<a>标签的href属性来传递参数，假设我们有一个子页面child.html,我们可以在父页面中这样设置<a>标签的href属性：
<a href="child.html?param1=value1¶m2=value2">点击这里传递参数</a>
在子页面child.html中，可以使用JavaScript来获取这些参数：
function getHash() {
const index = window.location.hash.indexOf('?');
if (index === -1) {
return '';
} else {
return window.location.hash.substr(index + 1);
}
}
const hashParams = getHash();
const params = hashParams.split('&');
const result = {};
for (let i = 0; i < params.length; i++) {
const [key, value] = params[i].split('=');
result[decodeURIComponent(key)] = decodeURIComponent(value);
}
console.log(result); // 输出 { param1: "value1", param2: "value2" }
2、通过JavaScript传递
方法一：使用全局变量或者localStorage/sessionStorage
在父页面中，可以将需要传递的参数存储在一个全局变量或者localStorage/sessionStorage中，在子页面中，可以通过访问这些变量或存储来获取参数，在父页面中设置全局变量：
window.globalParam1 = 'value1'; window.globalParam2 = 'value2';
在子页面中获取这些参数：
const globalParam1 = window.globalParam1; // "value1" const globalParam2 = window.globalParam2; // "value2"
方法二：使用postMessage事件通信机制(仅适用于同源页面)
同源策略限制了不同源之间的交互，如果两个页面具有相同的协议、域名和端口号，那么它们就可以进行跨域通信，在这种情况下，可以使用HTML5的postMessage事件通信机制来实现iframe之间的参数传递，以下是一个简单的示例：
父页面(parent.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Page</title>
</head>
<body>
<iframe src="child.html" id="myIframe"></iframe>
<script>
const myIframe = document.getElementById('myIframe');
myIframe.contentWindow.addEventListener('message', function(event) {
console.log('接收到子页面的消息：', event.data); // "param1=value1¶m2=value2" 将被打印出来
});
['param1', 'param2'].forEach(function(key) {
myIframe.contentWindow.postMessage(key + '=' + encodeURIComponent('value')); // 将参数发送给子页面，"param1=value1¶m2=value2" 将被发送出去，这里的 'value' 可以替换为实际的值，注意要对参数值进行编码，防止特殊字符导致的问题，也要注意不要泄露敏感信息。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/321229.html
微信扫一扫 