新页面使用iframe引用旧页面,但是在旧页面怎么去获取新页面中在iframede src属性中增加的参数
时间: 2024-09-12 18:05:55 浏览: 39
当你在一个旧页面中使用`<iframe>`引用包含额外参数的新页面时,由于浏览器的安全限制(同源策略),直接从父窗口(即旧页面)访问嵌入页面(iframe)的内容可能会受到限制。新页面中的`src`属性添加的参数是不能直接通过JavaScript在父页面上读取的。
然而,你可以通过以下几种间接方法来获取这些信息:
1. **POST通信**:如果新页面对参数进行了POST请求,可以在旧页面通过监听`window.postMessage()`事件,当新页面发送消息时,可以从事件数据中提取参数。
```javascript
window.addEventListener('message', function(event) {
if (event.origin !== 'http://newpage.com') return; // 验证是否来自预期来源
const params = JSON.parse(event.data); // 假设参数是以JSON格式发送
console.log(params);
});
```
2. **查询字符串编码**:如果你将参数附加在`src`后面作为查询字符串,如`src="parent.html?key=value"`, 可以在旧页面通过URL解析来获取:
```javascript
const iframeUrl = document.getElementById("yourIframe").contentWindow.location.href;
const queryParams = new URLSearchParams(iframeUrl.search);
console.log(queryParams.get('key')); // 获取名为'key'的参数值
```
3. **使用`srcdoc`属性**:如果新页面内容可以直接设置到`<iframe>`的`srcdoc`属性,那么可以考虑在新页面加载完成后动态修改`srcdoc`,然后在旧页面里通过JavaScript操作这个属性获取内容。
注意以上方法都存在一定的安全性和兼容性问题,实际应用中应根据具体情况选择合适的方式,并处理好跨域问题。
阅读全文