操作iframe 的方法与兼容性
首先创建两个页面
//iframe1.html <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="content">帅哥天下9</p>
<script>
console.log( window.parent.document.getElementById("testParent").innerHTML);
//调用父框架
</script>
</body>
</html>
//demo1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">click</button>
<div id="testParent">调用父框架</div>
<iframe src="iframe1.html" id="iframe1" frameborder="1"></iframe> <script>
var btn=document.getElementById("btn");
var iframe1=document.getElementById("ifram1");
btn.onclick=function(){ iframe1.contentWindow.document.getElementById("content").
style.background="red"; //iframe1.contentDocument.getElementById("content")
.style.background="red"; }
</script>
</body>
</html>
iframe1.contentWindow 获取 src设置页面的window对象然后操作里面的DOM
这个方法兼容IE 678 和其他主流浏览器 比如 FF Chrome 但是 Chrome对安全有保护
只可以在服务器端使用 可以用phpstudy测试
iframe1.contentDocument IE低版本不支持
在Chrome同理
window.parent 调用父框架
window.top 调用顶层框架
//ifram2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body> <button id="changeTopDiv">changeTopDiv</button>
<iframe src="iframe2.html" frameborder="1" ></iframe>
<script>
var ctd=documet.getElementById("changeTopDiv");
var topDiv=window.top.document.getElementById("topIframe");
ctd.onclick=funtion(){
topDiv.style.background="red";
}
</script> </body>
</html>
//demo2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<iframe src="iframe2.html" frameborder="1"></iframe> </body>
</html>
//demo3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body> <div id="topIframe">topIframe</div>
<iframe src="demo2.html" frameborder="1"></iframe> </body>
</html>
还有一个就是防止钓鱼
有的网站会把别的网站iframe进来 然后欺骗用户去操作一些东西 谋利
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<iframe src="test.html" frameborder="1"></iframe>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
if(window !=window.top){
//必须让当前页面为最高级别页面
window.top.location.href=window.location.href; }
</body>
</html>
改变框架高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
html,body{ padding: 0;
margin: 0;
} .box{ width:200px;
height:200px;
background: red; } </style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
html,body{ padding: 0;
margin: 0;
} .box{ width:200px;
height:400px;
background: green; }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<iframe src="iframe5.html" frameborder="1" id="show" scrolling="no"></iframe>
<button id="btn1">btn1</button>
<button id="btn2">btn2</button>
<script>
var btn1=document.getElementById("btn1");
var btn2=document.getElementById("btn2");
var show=document.getElementById("show");
function changeHeight(){
setTimeout(function(){
// 添加一个定时器 让他执行慢一点
//不然src刚执行完 html 还没刷新完
// 就改变宽度 还是之前的宽度
show.height=show.contentWindow.document.body.offsetHeight; }, 200); } changeHeight(); btn1.onclick=function(){ show.src="iframe5.html";
changeHeight(); } btn2.onclick=function(){ show.src="iframe6.html";
changeHeight(); }
</script>
</body>
</html>
写到这里 累死我了
最后一个就是iframe 的load事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<iframe src="iframe8.html" frameborder="1" id="show" scrolling="no"></iframe>
<script>
var show=document.getElementById("show");
show.onload=function(){
alert("加载完毕！");
}
//ie 也支持这个事件 但是 IE事件不能这么用
//得需要事件绑定才可以
//show.attachEvent("click",function(){
alert("加载完毕");
});
</script>
</script>
</body>
</html>
操作iframe 的方法与兼容性的更多相关文章
- jquery操作iframe的方法：父页面和子页面相互操作的方法
今天在弄jquery操作iframe中元素:先由iframe中的子页面b.html给外面的父页面a.html页面传值,再将a.html页面计算机的值放到b.html页面上,这里就用到子页面和父页面相互 ...
- 操作iframe的方法
子页面 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...
- js学习笔记：操作iframe
iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...
- jquery 操作iframe的几种方法总结
iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法: 父窗口操作IFRAME:window.frames["iframeSo ...
- JQuery操作iframe父页面与子页面的元素与方法
JQuery操作iframe父页面与子页面的元素与方法 JQUERY IFRAME 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元 ...
- 笔记：javascript操作iframe内的DOM元素，及调用iframe内的方法
iframe相当于一个嵌入在网页内的浏览器,它与当前网页是隔离的. 但有时我们也需要在当前网页操作iframe内的元素或操作iframe内的javascript方法. 在网页内操作DOM元素,是使用d ...
- jQuery操作iframe中js函数的方法小结
1.jquery操作iframe中的元素(2种方式) ? 1 2 var tha = $(window.frames["core_content"].document).find( ...
- jquery方法操作iframe元素
操作iframe父元素 $("#rolesCtl",parent.document).find( 'button' ).trigger( 'click' ); 在父页面获取ifra ...
- 操作iframe的一些方法
//父页面操作iframe里的内容 oInput.onclick=function(){ var oBox = oIframe.contentWindow.document.getElementByI ...
随机推荐
- 20155314 2016-2017-2 《Java程序设计》第6周学习总结
20155314 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 理解流与IO 理解InputStream/OutPutStream的继承架构 理解Reade ...
- iOS 6 & iOS 7 的适配笔记
iOS 6 & iOS 7 的适配 场景1: 没有NavigationController,同时根视图是UIView- (void)viewWillLayoutSubviews{ if ([[ ...
- Export SQLite data to Excel in iOS programmatically(OC)
//For the app I have that did this, the SQLite data was fairly large. Therefore, I used a background ...
- HDU 2521 反素数 模拟题
解题报告:水题,直接附上代码,只是觉得这题的作者是不是吃饱了饭撑的,反素数的概念跟这题一点关系都没有. #include<cstdio> int judge1(int k) { ; ;i& ...
- sql 跨服务器查询数据
方法一:用OPENDATASOURCE [SQL SERVER] 跨服务器查询 --1 打开 reconfigure reconfigure SELECT * FROM OPENDATASOURCE( ...
- 【转】SpringMVC Controller 介绍
转自:原文url 一.简介 在SpringMVC 中,控制器Controller 负责处理由DispatcherServlet 分发的请求,它把用户请求的数据经过业务处理层处理之后封装成一个Model ...
- 激活Window和office工具
激活Window和office工具: 第一种工具(已使用工具激活microsoft office professional plus 2013版本): 暴风激活工具(暴风激活工具 ...
- 兼容IE FF 获取鼠标位置
由于Firefox和IE等浏览器之间对js解释的方式不一样,firefox下面获取鼠标位置不能够直接使用clientX来获取.网上说的一般都是触发mousemove事件才行.我这里有两段代码,思路都一 ...
- SqlServer 批量备份
-- 实现方式1:使用游标 DECLARE @FileName VARCHAR(200), @CurrentTime VARCHAR(50), @DBName VARCHAR(100), @SQL V ...
- 【LOJ】#2524. 「HAOI2018」反色游戏
题解 如果一个联通块是一个树的话,方案数就一种,如果这个联通块还有别的边,那选了一条别的边就会把树上对应路径全部取反,所以方案数是\(2^{m - n + 1}\) 如果联通块数为\(c\)方案数为\ ...