简单介绍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. 『无为则无心』Python日志 — 69、补充：logging.basicConfig()函数说明

    目录 1.basicConfig()函数说明 2.应用 1.basicConfig()函数说明 此函数,通过创建一个带有默认Formatter(格式器)的StreamHandler(处理器),并将其添 ...

  2. Qt：打包成可执行文件(exe文件)后出现Driver not Loaded的解决方法

    问题 在当前电脑上打包为exe可以正常执行,发送给另一台电脑后却无法执行,并且出现"Driver not loaded"的提示框. 可能原因 1.另一台电脑上没有MySQL(或ex ...

  3. k8s 中 nfs作为存储的三种方式

    1.安装nfs服务.直接给命令 yum install nfs-utils vim /etc/exports /data/k8s/ 172.16.1.0/24(sync,rw,no_root_squa ...

  4. Python3中__repr__和__str__区别

    示例: class Test(object): def __init__(self, value='hello, world!'): self.data = value >>> t ...

  5. 图解大数据 | 海量数据库查询-Hive与HBase详解

    作者:韩信子@ShowMeAI 教程地址:http://www.showmeai.tech/tutorials/84 本文地址:http://www.showmeai.tech/article-det ...

  6. LeetCode-098-验证二叉搜索树

    验证二叉搜索树 题目描述:给定一个二叉树,判断其是否是一个有效的二叉搜索树. 假设一个二叉搜索树具有如下特征: 节点的左子树只包含小于当前节点的数. 节点的右子树只包含大于当前节点的数. 所有左子树和 ...

  7. LeetCode-016-最接近的三数之和

    最接近的三数之和 题目描述:给定一个包括 n 个整数的数组 nums 和 一个目标值 target.找出 nums 中的三个整数,使得它们的和与 target 最接近.返回这三个数的和.假定每组输入只 ...

  8. vue监听有无网络

    mounted () {     window.addEventListener('offline', function ($event) { alert('offline'); });     wi ...

  9. Spring系列20：注解详解和Spring注解增强(基础内功)

    有部分小伙伴反馈说前面基于注解的Spring中大量使用注解,由于对Java的注解不熟悉,有点难受.建议总结一篇的Java注解的基础知识,那么,它来了! 本文内容 什么是注解? 如何定义注解 如何使用注 ...

  10. 『现学现忘』Docker基础 — 30、Docker中数据卷相关命令

    目录 1.Volume命令说明 2.Volume命令的使用 (1)创建数据卷 (2)查看本地数据卷列表 (3)打印myVolume数据卷的详细信息 (4)删除数据卷 (5)删除所有未使用的数据卷 3. ...