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. SpringBoot(十一)_springboot热部署

    在开发中,后台修改了代码就要重新启动服务,很是费劲,现在我们可以让SpringBoot自动编译 热启动就需要用到我们在一开始引入的另外一个组件:devtools.它是 Spring Boot 提供的一 ...

  2. Be the Winner HDU - 2509（反博弈。。这样叫应该没错吧。。）

    就是   好几堆苹果  每堆苹果排成一条线  可以任意从每堆拿苹果   如果一堆苹果里拿了之后  则有两种情况 1.从不是边缘拿   拿完这一堆变成两堆 2.从边缘拿   拿完还是一堆 题目还要求 谁 ...

  3. VS2013 UML 如何复制文件

    如:复制活动图,文件复制了显示不了 正确做法:新建活动图,打开源活动图,全选,复制,在新建的活动图粘贴,以此实现复制

  4. 搜索引擎（Solr-索引详解）

    时间字段类型特别说明 Solr中提供的时间字段类型( DatePointField, DateRangeField,废除的TrieDateField )是以时间毫秒数来存储时间的. 要求字段值以ISO ...

  5. Nginx访问日志分析

    nginx默认的日志格式 log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$sta ...

  6. 【数学】【CF1096C】 Polygon for the Angle

    Description 给定一个角度 \(\theta\),请你寻找一个正 \(n\) 边型,满足在这个正 \(n\) 边型上找三个顶点 \(A,B,C\) (可以不相邻),使得 \(\angle A ...

  7. Java虚拟机性能监控与调优

    1 基于JDK命令行工具的监控 1.1 JVM的参数类型 1.1.1 标准参数 在JVM的各个版本基本上保持不变,很稳定的. -help -server -client -version -showv ...

  8. Codeforces Round #302 (Div. 2) C 简单dp

    C. Writing Code time limit per test 3 seconds memory limit per test 256 megabytes input standard inp ...

  9. [poj 1533]最长上升子序列nlogn树状数组

    题目链接:http://poj.org/problem?id=2533 其实这个题的数据范围n^2都可以过,只是为了练习一下nlogn的写法. 最长上升子序列的nlogn写法有两种,一种是变形的dp, ...

  10. mysql查改

    1 MySQL UNION 操作符语法格式: SELECT expression1, expression2, ... expression_n FROM tables [WHERE conditio ...