iframe.contentWindow 介绍

周大胖子 · 发表于 2018-7-4 00:17:10

在这里我要白话一下这个东西：如何在父级别页面操控内嵌iframe 的页面？
原理：
第一步：在父页面获取 iframe 的 dome 结构【其实这个该交页面元素可能更为合适】。
第二步：在父页面选中iframe 的元素进行操作。
【浏览器兼容是关键考试要考！要考！要考！】

其中。尤为重要的就是 iframe.contentWindow
参考链接：https://blog.csdn.net/skydar/article/details/51207110
总结：就是获取对象的，
例如在火狐谷歌中：下面这句话表示拿到iframe中所有的元素

ofrm1 = document.getElementById("frame1").contentWindow.document;

复制代码

IE嘛非此类现在补全一个两个页面的代码供参考
父页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>这个页面的主要功能就是控制 iframe 的按钮点击提交</title>
</head>
<body>
<h3>这个页面的主要功能就是控制 iframe 的按钮点击提交</h3>
<hr />
<iframe name="frame1" id="frame1" src="bt2.html" frameborder="1" height="300" width="600"></iframe>
<hr />
<h2>通过点击改变iframe 页面中的input值</h2>
<p>
<input id="setInput" type="text" name="skm" value="" />
<button type="button" onclick="setValue()">点击更新iframe中 input的值</button>
<button onclick="ifrSub()">点击提交</button>
</p>
<hr />
<script type="text/javascript">
function setValue()
{
var ofrm1 = document.getElementById("frame1").document;
var setInput = document.getElementById("setInput")
// //本页面中准备存入 iframe中的值
alert(setInput.value)
if(ofrm1 == undefined)
{
// 拿到所有页面元素
ofrm1 = document.getElementById("frame1").contentWindow.document;
//框架中值等于页面中的值
// 注意下一条语句不用 var 申明
ofrm1.getElementById("txt2").value = setInput.value
// 这句话是检验是否赋值成功可以不写
var fva = ofrm1.getElementById("txt2").value;
alert("firefox/chrome赋值成功，结果为:" + fva )
}
else
{
document.frames["frame1"].document.getElementById("txt2").value = setInput.value
// 这句话是检验是否赋值成功可以不写
var fva = document.frames["frame1"].document.getElementById("txt1").value;
alert("IE 赋值成功，结果为:" + fva )
}
}
// 控制页面提交的方法
function ifrSub()
{
var ofrm1 = document.getElementById("frame1").document;
if(ofrm1 == undefined)
{
// 第一步拿到 iframe内的所有元素
ofrm1 = document.getElementById("frame1").contentWindow.document;
// 模拟按钮点击提交
ofrm1.getElementById('sub').click()
}
else
{
// 模拟按钮点击提交
document.frames["frame1"].document.getElementById("sub").click();
}
}
</script>
</body>
</html>

复制代码

iframe中：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>按钮内嵌页面</title>
</head>
<body>
<form action="bt3.html" method="get">
<div>
<input id="txt1" name="txt1" type="text" value="测试" />
<input id="txt2" name="txt1" type="text" value="2" />
</div>
<button type="submit" id="sub" />提交</button>
</form>
</body>
</html>

复制代码

当然我这也涉及到的点击提交按钮模拟iframe 的提交
所以补全dt3.html 这个建议一块捣鼓

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>获取连接的测试</title>
<style>
p input{
display: inline-block;
line-height: 36px;
height:36px;
width:500px;
}
</style>
</head>
<body>
<p>
<input id="ttt" type="text" />
</p>
<script>
var url = window.location.href;
var ttt = document.getElementById("ttt");
ttt.value = url
</script>
</body>
</html>

复制代码

周大胖子 · 发表于 2018-7-4 09:51:03

document.frames('reportFrame').document 不是很了解，有两个document?其中document.frames('reportFrame')指的是你当前文档中一个name属性为'reportFrame'的frame的window对象（不是DOM对象），然后接一个".document"就取得了DOM对象，这个DOM对象就是你要查找frame中ID为reportFrameForm的DOM对象的context