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. Linux上两种网络连接方式

    模式一:NAT方式好处:路由器更换,或者交换机更换,网络仍然可以使用,所用使用最多 准备工作: 查看VMware服务器启动情况,五个全开模式 vmnet8开启模式 1 配置VMware交换机的ip地址 ...

  2. request使用代理

    # *_*coding:utf-8 *_* import requests url = 'http://test.yeves.cn/test_header.php' params = {'id':'1 ...

  3. 电脑CPU开机上电后的第一条指令

    结合上面的文章,CPU上电后第一条指令是通过CS:IP来指定的,CPU厂家会给其初始值,对于386处理器来说,CPU第一条指令地址是 0xFFFFFFF0 这里会有一个问题,CPU怎么能一上来就去0x ...

  4. 基于 Jmeter 的 web 端接口自动化测试平台

    简介 基于之前的react+unittest+flask的接口自动化平台开发经验,和趟过的坑,我重新开发了这个接口自动化平台.平台前端采用的antd+dva+umi的antd-pro模板,结合平台业务 ...

  5. C++模板常用功能讲解

    前言 泛型编程是C++继面向对象编程之后的又一个重点,是为了编写与具体类型无关的代码.而模板是泛型编程的基础.模板简单来理解,可以看作是用宏来实现的,事实上确实有人用宏来实现了模板类似的功能.模板,也 ...

  6. Day 5 笔记 dp动态规划

    Day 5 笔记 dp动态规划 一.动态规划的基本思路 就是用一些子状态来算出全局状态. 特点: 无后效性--狗熊掰棒子,所以滚动什么的最好了 可以分解性--每个大的状态可以分解成较小的步骤完成 dp ...

  7. CF702F T-Shirts

    题目描述 The big consignment of t-shirts goes on sale in the shop before the beginning of the spring. In ...

  8. JVM工作原理 - 内存空间

    大多数 JVM 将内存区域划分为 Method Area(Non-Heap)(方法区) ,Heap(堆) , Program Counter Register(程序计数器) ,   VM Stack( ...

  9. Golang基础（二）

    1. 条件语句 if ... else if ... else... package main import "fmt" func main() { { fmt.Printf(&q ...

  10. Java EE之通过表单上传文件

    public class Ticket { private String customerName; private String subject; private String body; priv ...