本文介绍了一种在主页面中获取嵌套iframe内元素值的方法，并通过示例代码展示了如何使用JavaScript在不同浏览器环境下实现这一功能。适用于前端开发者解决跨域iframe通信问题。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>02.主页面获取iframe页面元素的值</title>
<script>
/*参考：https://blog.csdn.net/qq_27626333/article/details/77990196*/
function getValue() {
/* 获取 iframe 的内嵌文档的输入框的值，并跳转到某链接。*/
let tmp = ''
// 在IE下。
if (document.frames) {
tmp +=
document.frames['myFrame'].document.getElementById('test').value
}
// 其他浏览器。
else {
// dom 方法。
// let iframe = document.getElementById('myFrame');
// tmp = iframe.contentWindow.document.getElementById('test').value;
// jquery 方法。
tmp = document.querySelector('#myFrame').contentWindow.document.querySelector('#test').value
// console.log("tmp.split('：'):", tmp.split('：'));
// (2) ["欢迎访问", "http://blog.csdn.net/qq_27626333"]
}
// console.log("location:", location);
if (confirm(tmp)) {
// 单击确定后的动作。
location.href = tmp.split('：')[1]
}
}
</script>
</head>
<body onload="getValue()">
<iframe id="myFrame" src="03.nestedWeb.html" width="600px" height="100px;"></iframe>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>03.nestedWeb</title>
<style>
#test {
border: solid royalblue 2px;
border-radius: 4px;
width: 500px;
color: #797979;
height: 50px;
line-height: 50px;
font-size: 20px;
}
</style>
</head>
<body>
<input
type="text"
id="test"
value="欢迎访问：https://blog.csdn.net/qq_27626333/article/details/77990196"
/>
</body>
</html>
扫一扫
1931
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
