简单介绍iframe标签，所有的浏览器都支持<iframe>标签，iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。通常我们常用的iframe标签的属性有：width（iframe 的宽度）、height（iframe 的高度）、frameborder（显示框架周围的边框）、src（iframe 中显示的文档的 URL）。

那么如何使用js来获取iframe页面内的对象呢，以及反过来说内嵌的iframe页面又该如何得到父级页面的对象？

注意地方：

  1. 需要在服务器下运行
  2. 父级页面须保证页面内容加载完毕，即js获取iframe页面内容需要在window.onload中写

相关方法：

1.父级页面获取iframe页面中的元素对象（关键contentWindow）：

document.getElementById(iframe的id).contentWindow.document.getElementById(iframe页面元素id)

2.iframe页面获取父级页面的元素对象（关键window.parent）：

window.parent.document.getElementById(父级页面的元素id)

代码示例：

说明：父级页面test.html，iframe子级页面：iframe.html

test.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <h1 id="parent">父级页面</h1>

    <iframe id="myIframe" src="iframe.html"></iframe>

</body>

<script type="text/javascript">

    // document.onclick = function(){

    window.onload = function(){

        var myIframe = document.getElementById("myIframe").contentWindow

                               .document.getElementById("son").innerText;

        console.log(myIframe)

    }

</script>

</html>

iframe.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <h1 id="son">子级页面</h1>

</body>

<script type="text/javascript">

    window.onload = function(){

        var sonText = window.parent.document.getElementById("parent").innerText;

        console.log(sonText);

    }

</script>

</html>

在服务器下打开test.html文件，chrome浏览器测试结果：

iframe.html先获取到它的父级页面test.html的h1元素的内容“父级页面”，并输出在控制台；

然后到text.html页面获取iframe.html中的h1元素的内容“子级页面”，并输出在控制台。

js如何获取iframe页面内的对象的更多相关文章

  1. 用js互相调用iframe页面内的js函数

    http://www.jb51.net/web/18555.html 1,首先获得右栏iframe对象 var frames=document.getElementById("frameid ...

  2. 用JS或jQuery访问页面内的iframe,兼容IE/FF

    用JS或jQuery访问页面内的iframe,兼容IE/FF js或者jQuery访问页面中的框架也就是iframe.注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.htm ...

  3. 用JS或jQuery访问页面内的iframe

    用JS或jQuery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的!假设有两个页面,在相同域下.index.html 文件内含有一个iframe: <!DOCTYPE ...

  4. Js动态获取iframe子页面的高度////////////////////////zzzz

    Js动态获取iframe子页面的高度   Js动态获取iframe子页面的高度总结 问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 ...

  5. js 获取iframe页面元素

      js 获取iframe页面元素 CreationTime--2018年8月16日18点00分 Author:Marydon <!-- chart图表 --> <iframe id ...

  6. 获取Iframe页面高度并赋值给Iframe以及获取iframe里的元素

    最近接手了别人的项目,别人用到了iframe,自己在实战中总结了一些关于iframe的小问题. 获取Iframe页面高度并赋值给Iframe Html <iframe name="co ...

  7. js/jquery获取当前页面URL地址并判断URL字符串中是否包含某个具体值

    js/jquery获取当前页面URL地址并判断URL字符串中是否包含某个具体值本文介绍jquery/js获取当前页面url地址的方法,在jquery与js中获取当前页面url方法是一样的,因为jque ...

  8. Js/Jquery获取iframe中的元素

    转载: Js/Jquery获取iframe中的元素 - - ITeye技术网站http://java-my-life.iteye.com/blog/1275205 在web开发中,经常会用到ifram ...

  9. js准确获取当前页面url网址信息

    这篇文章主要为大家介绍了js准确获取当前页面url网址信息的多种方法,包括正则法.split拆分法等,需要的朋友可以参考下   在WEB开发中,时常会用到javascript来获取当前页面的url网址 ...

随机推荐

  1. C# 反编译工具之ILSpy

    下载地址:http://ilspy.net/ 中文版下载地址:http://www.fishlee.net/soft/ilspy_chs 对dll和exe文件反编译:

  2. JUC知识点总结（知识点见内部目录）

    目录 JUC是什么 锁 Synchronized VS Lock 实现差异 Synchronized & Lock 总结 Synchronized锁的对象是什么 生产者&消费者 只有两 ...

  3. SQLserver建表规则

    --执行环境:生产环境 / beta环境--备注:文件开头写上描述或者原因.项目USE database --例如 USE LZB GO CREATE TABLE Ymtable1 ( iOrderI ...

  4. DDD 领域驱动设计之面向对象思想

    面向对象 面向对象是一种对世界理解和抽象的方法.那么对象是什么呢? 对象是对世界的理解和抽象,世界又代称为万物.理解世界是比较复杂的,但是世界又是由事物组成的. 正是这样的一种关系,认识事物是极其重要 ...

  5. Redis安装以及常见问题

    安装 下载 redis官网地址:https://redis.io/ centos安装 创建软件放置目录mkdir soft 进入soft目录并下载redis安装包. cd soft wget http ...

  6. Linux 显示文件大小的命令

    ll显示的是字节,可以使用-h参数来提高文件大小的可读性,另外ll不是命令,是ls -l的别名ls -al 是以字节单位显示文件或者文件夹大小: 字节b,千字节kb, 1G=1024M=1024*10 ...

  7. 5月8日 python学习总结 mysql 建表操作

    一 .创建表的完整语法 create table 表名( 字段名1 类型[(宽度) 约束条件],字段名2 类型[(宽度) 约束条件],字段名3 类型[(宽度) 约束条件]); 解释: 类型:使用限制字 ...

  8. JVM | 第1部分：自动内存管理与性能调优《深入理解 Java 虚拟机》

    目录 前言 1. 自动内存管理 1.1 JVM运行时数据区 1.2 Java 内存结构 1.3 HotSpot 虚拟机创建对象 1.4 HotSpot 虚拟机的对象内存布局 1.5 访问对象 2. 垃 ...

  9. [FromBody]List<string> 用PostMan如何请求

    在MVC项目,写了一个API方法,如下: /// <summary>/// 测试/// </summary>/// <param name="idList&qu ...

  10. 第3 章 802.11 MAC

    一 前言 802.11 规格的关键在于MAC(介质访问控制层),属于数据链路层,它定义了数据帧怎样在介质上进行传输.MAC 位于各种物理层之上,控制数据的传输.不同的物理层可以提供不同的传输速度,不过 ...