操作iframe
iframe是在页面中嵌套的子页，当前页面（这里称为父页）和嵌套页面（这里称为子页）可以相互控制：
当父页控制子页用contentWindow，用法为 对象.contentWindow.document.XX 或用contentDocument.XX 来操作
子页控制父页用window.parent.document.XX 如果是多层嵌套想直接操纵祖先页面就用 window.top.document.XX
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5实现拖拽操作</title>
<meta charset="utf-8"/>
<style>
</style>
<script>
window.onload=function(){
var oinput=document.getElementById('input1');
var oif=document.getElementById('f1');
oinput.onclick=function(){
//alert(oif.contentWindow.document.getElementById('d1'));
//contentWindow全部浏览器都支持
//contentDocument 浏览器IE6，IE7不支持
oif.contentDocument.getElementById('d1').style.color='red';
//oif.contentWindow.document.getElementById('d1').style.color='red';
};
}
</script>
</head>
<body>
<input type='button' value='点我' id='input1'/>
<iframe src='iframe1.html' id='f1'> </iframe>
<div id='d1'>通过子更改我的背景色 </div>
</body>
</html>
本实例牵扯到父页和多个子页，多重嵌套，要用到多个页面的多篇代码，原理很好理解，但要精确表达出却很困难，其核心知识就是开头介绍的几个方法。总之今天学的东西很多很杂，代码多次更改没有合理保存，以后不急不躁，一步一个脚印。
补充：禁止别人以iframe加载你的页面
if (window.location != window.parent.location) window.parent.location = window.location;
操作iframe的更多相关文章
- js学习笔记：操作iframe
iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...
- 原生js与jquery操作iframe
1 原生js获取iframe的window对象 //方法1 document.getElementById('iframeId').contentWindow; //方法2 window.frame ...
- Jquery 操作IFrame
使用jquery操作iframe 1. 内容里有两个ifame <iframe id="leftiframe"...</iframe> <iframe id ...
- jquery 操作iframe的几种方法总结
iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法: 父窗口操作IFRAME:window.frames["iframeSo ...
- jquery操作iframe中的js函数
关键字:jquery操作iframe中的js函数 1.jquery操作iframe中的元素(2种方式) var tha = $(window.frames["core_content&quo ...
- [置顶] js操作iframe兼容各种浏览器
在做项目时,遇到了操作iframe的相关问题.业务很简单,其实就是在操作iframe内部某个窗体时,调用父窗体的一个函数.于是就写了两个很简单的htm页面用来测试,使用网上流行的方法在谷歌浏览器中始终 ...
- jquery ：操作iframe
原文 jquery :操作iframe 1. 内容里有两个ifame <iframe id="leftiframe"...</iframe> <iframe ...
- js操作iframe总结
一 在父页面操作子页面 IE下操作IFrame内容的代码: document.frames["MyIFrame"].document.getElementById(" ...
- JS中获取和操作iframe
一.需求与遇到的问题 在网站的后台管理中使用了iframe框架布局,包括顶部菜单.左侧导航和主页面.需求是:点击主页面上的一个按钮,在顶部菜单栏的右侧显示“退出”链接,点击可退出系统. 我的思路是:在 ...
- JQuery操作iframe父页面与子页面的元素与方法
JQuery操作iframe父页面与子页面的元素与方法 JQUERY IFRAME 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元 ...
随机推荐
- git pull 指定版本
git init git remote add origin git@bitbucket.org:huashiyiqike/lstm-hf.git git pull origin master
- php 连接redis，并登录验证
环境: centos7 上安装了redis, 同时安装了php的redis扩展 yum install redis yum install php-pecl-redis redis服务端设置了登录密码 ...
- 修改mysql默认字符集的方法
+--------------------------+---------------------------------+ | Variable_name | Value | +---------- ...
- 基于jQuery右下角旋转环状菜单代码
基于jQuery右下角旋转环状菜单代码.这是一款固定在页面的右下角位置,当用户点击了主菜单按钮后,子菜单项会以环状旋转进入页面,并使用animate.css来制作动画效果.效果图如下: 在线预览 ...
- nodejs之获取客户端真实的ip地址+动态页面中引用静态路径下的文件及图片等内容
1.nodejs获取客户端真实的IP地址: 在一般的管理网站中,尝尝会需要将用户的一些操作记录下来,并记住是哪个用户进行操作的,这时需要用户的ip地址,但是往往当这些应用部署在服务器上后,都使用了ng ...
- GitHub上那些值得一试的JAVA开源库
作为一名程序员,你几乎每天都会使用到GitHub上的那些著名Java第三方库,比如Apache Commons,Spring,Hibernate等等.除了这些,你可能还会fork或Star一些其他的开 ...
- TFS(Team Foundation Server)敏捷使用教程(四)：工作项跟踪（1）
工作项跟踪(1) 可跟踪性是软件过程的重要能力,TFS主要是以工作项来实现过程的可跟踪性.曾有人问:"你们实际项目里的工作项是怎么样的?能不能让我们看看?"我也一直很好奇别的公司T ...
- DBA需要掌握的shell知识
每个中高级DBA都需要掌握一些简单脚本的编写,这样才能从繁杂重复的基础维护工作中解脱出来,才能有时间去研究更有价值的技术.VBird在讲shell script的时候,给出了几个经典的小范例练习,对于 ...
- [Python]同是新手的我，分享一些经验
本来想分享一些知识,但是发现,写着写着,感觉分享一些经验,或许会少让大家走一些弯路,索性就把标题一改. 我不是教给大家些什么,我没有资格,我也是摸着石头过河,我只是本着分享的精神,在这里分享自己的东西 ...
- OpenCV开发环境配置-Windows/MinGW/Clion/CMake
临时更换成了TDM-GCC,和mingw类似,这里只是声明一下. 由于opencv下载下来的.exe安装包实际上是没有mingw(gcc)匹配的/动静态库,因此这些东西需要我们自己使用mingw编译. ...