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. [转帖]amzon最新的产品outposts

    2018年12月3日,全球领先的企业软件创新者VMware(NYSE: VMW)发布两款运行于AWS Outposts的全新解决方案预览:VMware Cloud on AWS Outposts与VM ...

  2. 使用Shell脚本删除/清空日志文件

    话不多少,直接上代码: #!/bin/bash workdir=("/home/Tax_Punish_Ret/log_txt") #可填写多个路径, 用空格隔开 # 查找日志文件 ...

  3. javascript中对象访问自身属性的方式

    在javascript中,通过对象的方法访问对象自身属性时,必须采用this.fieldName的方式. 原因是javascript中Function是无状态的,访问对象的属性时,必须指定当前的上下文 ...

  4. CentOS 7 上安装（LAMP）服务 Linux，Apache，MySQL，PHP

    介绍 LAMP 是现在非常流行的 WEB 环境, 是 Linux,Apache,MySQL,PHP 的缩写.数据存储在 MySQL 中,动态内容由 PHP 处理. 在本指南中,我们将演示如何在 Cen ...

  5. XOR and Favorite Number CodeForces - 617E（前缀异或+莫队）

    题意原文地址:https://blog.csdn.net/chenzhenyu123456/article/details/50574169 题意:有n个数和m次查询,每次查询区间[l, r]问满足a ...

  6. eclipse 重装了tomcat后配置路径

    在Windows->Preferences->Server->Runtime Environments把先前的工程Servers删除掉

  7. 安装MySql出现Error Nr.1045的解决办法

    如图,最后一步出现这个错误框 这是因为上次安装过MySql,其用户数据在卸载的时候没有被删除掉,解决办法如下: 显示隐藏的文件夹,打开C盘,找到下图文件删除之 删除之后再安装一遍MySQL,就可以了

  8. 【uoj33】 UR #2—树上GCD

    http://uoj.ac/problem/33 (题目链接) 题意 给出一棵${n}$个节点的有根树,${f_{u,v}=gcd(dis(u,lca(u,v)),dis(v,lca(u,v)))}$ ...

  9. Android Studio aidl文件路径自定义问题

    1.aidl旧文件夹中添加的内容无法编译 sourceSets中主要是把把src/main/aidl文件也作为java.srcDirs, resources.srcDirs,这样当编译程序时,AIDL ...

  10. 【agc019D】Shift and Flip

    Portal --> agc019D Description 给你一个\(A\)串一个\(B\)串(长度相等的两个\(01\)串),一次操作可以选择将\(A\)向左循环移动一位,将\(A\)向右 ...