1、代码1  index.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>我是demo1.html</title>

        <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <input type="button" name="btn1" id="btn1" value="点击按钮控制iframe页面" />

        <br />

        <iframe id="iframe1" src="iframe1.html" width="300" height="200"></iframe>

        <script>

//          window.onload = function(){

//              var oBtn1   = document.getElementById('btn1');

//              //获取iframe元素,oIframe.contentWindow就是iframe1.html页面的window对象

//              var oIframe = document.getElementById('iframe1');

//              var ifdoc = oIframe.contentWindow.document;

//              oBtn1.onclick = function() {

//                  //demo1.html页面中的js控制了iframe1.html页面的字体颜色

//                  oIframe.contentWindow.document.body.style.color = 'red';

//                  console.log(ifdoc.)

//              }

//          }

            window.onload = function(){

                var oBtn1   = document.getElementById('btn1');

                //获取iframe元素,oIframe.contentWindow就是iframe1.html页面的window对象

                var oIframe = $("#iframe1")[0];

                var ifdoc = oIframe.contentWindow.document;

                oBtn1.onclick = function() {

                    //demo1.html页面中的js控制了iframe1.html页面的字体颜色

                      oIframe.contentWindow.document.body.style.color = 'red';

                      var text =  ifdoc.getElementById("bbs").textContent=" ";

                    console.log(text)

                }

            }

        </script>

    </body>

</html>

　　

2、代码二是iframe页面的代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>我是iframe1.html</title>

    </head>

    <body>

        <div id="bbs">

            父级页面要改变我的颜色

        </div>

    </body>

</html>

　　

　　通过选中iframe标签使用contentWindow 方法来获取iframe子页面的document。

js操作控制iframe页面的dom元素的更多相关文章

  1. 获取父页面的dom元素

    $("li.jericho_tabs", window.top.document); 上面的代码意思是获取父页面的li元素,class为jericho_tabs的所有元素.

  2. layer 当前页获取iframe页的DOM元素

    layer.layui  开启iframe 之后,获取iframe 内容做自定义处理. parent.layer.open({ type: , title: '任務執行狀況.', shadeClose ...

  3. js获取iframe里面的dom

    最近在写页面遇到了问题,一个dom好多地方用到,然后我就单独写了个html页面,然后用iframe引入,但是,想获取iframe里面input的value,获取不到input,后面才知道原来js不能直 ...

  4. 通过Web Api 和 Angular.js 构建单页面的web 程序

    通过Web Api 和 Angular.js 构建单页面的web 程序 在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的 ...

  5. 原生JS操作iframe里的dom

    转:http://www.css88.com/archives/2343 一.父级窗口操作iframe里的dom JS操作iframe里的dom可是使用contentWindow属性,contentW ...

  6. 防止用iframe调用网页dom元素

    <system.webServer> <httpProtocol> <customHeaders> <add name="X-Frame-Optio ...

  7. jquery的常用操作（操作html页面的Dom对象的元素）

    一:页面加载完成时,会执行jquery的方法(不需要等待图片加载完成,只要dom结构加载完成,就执行该方法) //第一种写法: $(document).ready(function() { // 执行 ...

  8. JS添加或删除HTML dom元素的方法实例分析

    本文实例讲述了JS代码添加或删除HTML dom元素的方法.分享给大家供大家参考,具体如下: 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一 ...

  9. 笔记：javascript操作iframe内的DOM元素，及调用iframe内的方法

    iframe相当于一个嵌入在网页内的浏览器,它与当前网页是隔离的. 但有时我们也需要在当前网页操作iframe内的元素或操作iframe内的javascript方法. 在网页内操作DOM元素,是使用d ...

随机推荐

  1. webservice(二)简单实例

    1.建立WSDL文件      建立WSDL的工具很多,eclipse.zendstudio.vs都可以,我个人建议自己写,熟悉结构,另外自动工具对xml schame类型支持在类型中可能会报错. 下 ...

  2. MicrosoftFixit50688 [Windows7事件ID10,WMI错误的解决方法

     Windows7事件记录中有如下错误提示: "Event filter with query "SELECT * FROM __InstanceModificationEve ...

  3. Java 文件下载功能 解决中文乱码

    Html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  4. php手册 | python手册 | perl手册 | c#.net手册 | c++手册 | ruby手册 | jquery手册 | js手册 | prototype手册 | mysql手册 | smarty手册 | css手册 | html手册 | nginx手册 | apache手册 | shell手册 | svn手册

    收集各种实用类手册: http://shouce.jb51.net/shell/

  5. Python基础：Python函数、文件操作、递归

    函数参数 函数参数包括位置参数,关键字参数,动态参数(*args, **args)三种. 传参的过程是形式参数的赋值. *args传入的参数是元组形式,**args传入的参数是字典形式. 示例代码如下 ...

  6. innobackupx备份原理

    1.工具内容 该软件安装完成会有四个工具,如下所示: usr├── bin│ ├── innobackupex│ ├── xbcrypt│ ├── xbstream│ └── xtrabackup 其 ...

  7. IoT固/软件更新及开源选项

    会出什么问题呢?大多数这些设备的设计都不像是被恶意攻击的目标. 嵌入式系统传统上被认为是稳定的产品, 但实施起来成本高昂, 因为投资回报率(ROI)在的周期比较长. 在过去一旦发货, 就很少需要更新这 ...

  8. UOJ #126 【NOI2013】 快餐店

    题目链接:快餐店 震惊!某ZZ选手此题调了一天竟是因为……>>点击查看 一般碰到这种基环树的题都要先想想树上怎么做.这道题如果是在树上的话……好像求一遍直径就做完了?答案就是直径长度的一半 ...

  9. 【bzoj4199】【Noi2015】品酒大会

    题解 SA+并查集 把ht按大小倒序加入,并查集合并维护答案的变化: SAM 翻转串,求出SAM的parent树就是后缀树,两个串的最长公共后缀是他们lca的len值: 考率一个节点x,那么它子树里的 ...

  10. [USACO18OPEN]Out of Sorts P 冒泡排序理解之二

    题目描述 Bessie把快速排序和冒泡排序混在了一起 给一个伪快排的代码: 冒泡: bubble_sort_pass (A) { to length(A)- ], swap A[i] and A[i+ ...