iframe.contentWindow 介绍
在这里我要白话一下这个东西: 如何在 父级别页面 操控 内嵌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>
document.frames('reportFrame').document 不是很了解,有两个document?其中document.frames('reportFrame')指的是你当前文档中一个name属性为'reportFrame'的frame的window对象(不是DOM对象),然后接一个".document"就取得了DOM对象,这个DOM对象就是你要查找frame中ID为reportFrameForm的DOM对象的context
页:
[1]