js操作iframe总结
一 在父页面操作子页面
document.frames["MyIFrame"].document.getElementById("s").style.color="blue";
所以,想到在Firefox下用FireBug来调试。经过调试发现在Firefox下可用以下代码来实现:
document.getElementById("MyIFrame").contentDocument.getElementById("s").style.color="blue";
详细代码如下:
TestIFrame.htm:
<html>
<head>
<script type="text/javascript">
function f(){
var doc; if (document.all){//IE
doc = document.frames["MyIFrame"].document;
}else{//Firefox
doc = document.getElementById("MyIFrame").contentDocument;
} doc.getElementById("s").style.color="blue";
}
</script>
</head>
<body onload="f()"> <iframe id = "MyIFrame" name = "MyIFrame" src = "MyIFrame.htm" width = "100" height="100"></iframe> </body>
</html>
其实可以用一种通用方法:
<html>
<head>
<script type="text/javascript">
function f(){
//var doc = window.frames["MyIFrame"].document; 2中都可以
var doc = document.getElementById("MyIFrame").contentDocument;
doc.getElementById("s").style.color="blue";
}
</script>
</head>
<body onload="f()"> <iframe id = "MyIFrame" name = "MyIFrame" src = "MyIFrame.html" width = "100" height="100"></iframe> </body>
</html>
二 在子页面中操作父页面
父页面操作子页面
<html>
<head>
</head>
<body> <h2 id="s">55555555555555555555555555</h2>
<script>
//window.parent是获得父窗口的window对象
window.parent.document.getElementById("txt").innerHTML="你猜怎么样"; </script>
</body>
</html>
三 在父页面调用子页面的函数
<html>
<head> </head>
<body>
<iframe id = "MyIFrame" name = "MyIFrame" src = "MyIFrame.html" width = "100" height="100"></iframe>
<script type="text/javascript">
window.onload=function(){
//window.frames["MyIFrame"].window.test();
document.getElementById("MyIFrame").contentWindow.test();
}
</script>
</body>
</html>
四 在子页面调用父页面的函数
<html>
<head>
</head>
<body>
<h2 id="s">55555555555555555555555555</h2>
<script type="text/javascript">
window.onload=function(){
window.parent.test();
}
</script>
</body>
</html>
总结:iframe中的src是不能跨域的,如果跨域则无法进行操作。
js操作iframe总结的更多相关文章
- 原生JS操作iframe里的dom
转:http://www.css88.com/archives/2343 一.父级窗口操作iframe里的dom JS操作iframe里的dom可是使用contentWindow属性,contentW ...
- JS 操作iframe
很多人一直都有个想法,要是可以随心所欲的操作iframe就好了.这样静态页面也就有了相当于后台动态页面php,jsp,asp中include,require实现统一多页面布局的能力. 通过Javasc ...
- [置顶] js操作iframe兼容各种浏览器
在做项目时,遇到了操作iframe的相关问题.业务很简单,其实就是在操作iframe内部某个窗体时,调用父窗体的一个函数.于是就写了两个很简单的htm页面用来测试,使用网上流行的方法在谷歌浏览器中始终 ...
- JS操作iframe
1. 获得iframe的window对象 存在跨域访问限制. chrome:iframeElement. contentWindow firefox: iframeElement.contentWin ...
- JS操作iframe元素
1. demo1.html页面中有个iframe元素,iframe元素的src是iframe1.html,怎么在demo1.html页面中操作iframe1.html页面 答曰:demo1.html ...
- js操作iframe框架时应该屡清楚的一些概念
1.获取iframe的window对象 存在跨域访问限制. iframeElement.contentWindow 兼容 2.获取iframe的document对象 存在跨域访问限制. chrome: ...
- js操作Iframe非当前最上层窗体
如果当前窗口不是最上层窗口(比如是在Iframe中),那么就把自己变为最上层窗口. <script language="javascript" type="tex ...
- 百度地图和js操作iframe
document.getElementById("ifarme-63").contentWindow.document.getElementById("qksv" ...
- JS操作未跨域iframe里的DOM
这里简单说明两个方法,都是未跨域情况下在index.html内操作b.html内的 DOM. 如:index.html内引入iframe,在index内如何用JS操作iframe内的DOM元素? 先贴 ...
随机推荐
- 几个更新(Update声明)查询方法
积极 文化: 上的方法,数据库更新Update.的标准格式:Update 表名 set =值 where 条件只是依据数据的来源不同,还是有所差别的: 1.从外部输入这样的比較简单例:update ...
- css优先级计算规则
原文:css优先级计算规则 最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外联样式优先级低于内联样式,内联样式优先级低于行间样式,然后就没 ...
- python tcp socket 多线程
不多说,直接上代码 client.py #!/usr/bin/python import socket,sys,string host="localhost" port=8000 ...
- 工作笔记3.手把手教你搭建SSH(struts2+hibernate+spring)环境
上文中我们介绍<工作笔记2.软件开发经常使用工具> 从今天開始本文将教大家怎样进行开发?本文以搭建SSH(struts2+hibernate+spring)框架为例,共分为3步: 1)3个 ...
- fast-json.jar的用法
fast-json.jar 解析json数据:一种json数据解析方式是这种,点击这里下载jsonfast.jar+fastjsonAPI文档 [ { "id": 6378, &q ...
- NET Framework 4.5 五个新特性
.NET Framework 4.5 五个新特性 Framework 4.5 已经开发了几个项目了,想去研究一下VS 2015 里面的跨平台..不过好像4.5内核新特性还没搞明白呢还是先看看4.5内核 ...
- C# 程序自动批量生成 google maps 的KML文件
原文:C# 程序自动批量生成 google maps 的KML文件 google maps 的 KML 文件可以用于静态的地图标注,在某些应用中,我们手上往往有成百上千个地址,我们需要把这些地址和描述 ...
- 关于ios的autoLayout的一些简单介绍以及使用方法
一.autoLayout的用途: 主要用于屏幕适配,尤其是出现了iphone6,plus之后. 二.怎么简单的用autoLayout呢? 点击左一,可以看到: 点击左二: 基本上要想autolayou ...
- Warning: session_start() [function.session-start]: Cannot send session cookie - headers already sent by
配置php网站的时候,经常会在页首出现Warning: session_start() [function.session-start]: Cannot send session cache limi ...
- 使用python的Flask实现一个RESTful API服务器端
使用python的Flask实现一个RESTful API服务器端 最近这些年,REST已经成为web services和APIs的标准架构,很多APP的架构基本上是使用RESTful的形式了. 本文 ...