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. yiled(),wait(),sleep()方法区别

    yiled():让步 wait():等待 sleep():休眠 yiled是让步,会使当前线程由运行状态进入到就绪状态,让其他优先级高线程先执行,但是如果是同一优先级的线程,那么谁先执行就不确定了.它 ...

  2. 利用ZooKeeper简单实现分布式锁

    1.分布式锁的由来: 在程序开发过程中不得不考虑的就是并发问题.在java中对于同一个jvm而言,jdk已经提供了lock和同步等.但是在分布式情况下,往往存在多个进程对一些资源产生竞争关系,而这些进 ...

  3. spring通过工厂模式解决页面耦合问题

    spring通过工厂模式解决页面耦合问题

  4. Python学习---基础篇

    ###打开文件并打印: #!/usr/bin/python3 f = open('F://myproject/test.txt', encoding='utf-8',mode='r') content ...

  5. Qt——线程与定时器

    一.定时器QTimer类 The QTimer class provides repetitive and single-shot timers. The QTimer class provides ...

  6. 概率图模型（PGM）综述-by MIT 林达华博士

    声明:本文转载自http://www.sigvc.org/bbs/thread-728-1-1.html,个人感觉是很好的PGM理论综述,高屋建瓴的总结了PGM的主要分支和发展趋势,特收藏于此. “概 ...

  7. Android系统权限和root权限

    Android系统权限和root权限http://www.verydemo.com/demo_c189_i277.html

  8. 解题：SDOI 2010 魔法猪学院

    题面 题外话:神**可持久化左偏树,你谷的人都太神了,学不来 我把这个当做A*模板题的说,先讲一讲个人对A*的理解:如果说普通的BFS是Bellman_Ford,那A*就是一个Dijkstra.以寻找 ...

  9. TCP: time wait bucket table overflow解决方法

    /var/log/messages 中出现大量的 TCP: time wait bucket table overflow 引起该现象的原因是服务器tcp的连接数太多,超出了内和定义的最大数 临时改变 ...

  10. cocoaPods安装、更新第三方库

    pod install 换成 pod install --verbose --no-repo-update pod update 换成 pod update --verbose --no-repo-u ...