搜索
搜索
本版
帖子
用户
老莫的笔记本
»
敲代码不为别的,就是为了找个媳妇
›
前端菜鸟的进阶之路
›
随笔
›
iframe.contentWindow 介绍
返回列表
查看:
1077
|
回复:
1
iframe.contentWindow 介绍
[复制链接]
周大胖子
周大胖子
当前离线
积分
5169
664
主题
881
帖子
5169
积分
超级版主
积分
5169
发消息
发表于 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>
复制代码
回复
使用道具
举报
周大胖子
周大胖子
当前离线
积分
5169
664
主题
881
帖子
5169
积分
超级版主
积分
5169
发消息
楼主
|
发表于 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
回复
使用道具
举报
返回列表
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
立即注册
本版积分规则
发表回复
回帖后跳转到最后一页
快速回复
返回顶部
返回列表