简单介绍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：在一个Python程序中，运行另一个Python程序

    学习自: 1~3学习自如何在python中执行另一个py文件_python_脚本之家 4~6学习自Python中四种运行其他程序的方式 - hankleo - 博客园 1.os.system方法 用法 ...

  2. Markdown语法浅学

    typora语法使用 1.字体 *斜体*,_斜体_ **粗体** ***加粗斜体*** ~~删除线~~ <u>下划线</u> ***分割线 , --- 2.标题 # 一级标题 ...

  3. Linux-本地日志服务管理（rsyslog基础）

    目录 系统环境 1.常见的两种日志管理服务 1.1 RSYSLOG系统日志服务 1.2 ELK 2.RSYSLOG日志服务的相关知识 2.1 RSYSLOG日志消息级别 2.2 RSYSLOG日志服务 ...

  4. 重磅 | 腾讯云服务网格开源项目 Aeraki Mesh 加入 CNCF 云原生全景图

    作者 赵化冰,腾讯云工程师,Aeraki Mesh 创始人,Istio member,Envoy contributor,目前负责 Tencent Cloud Mesh 研发工作. 摘要 近日,腾讯云 ...

  5. joblib保存模型和joblib的并行化处理和tqdm

    keep首先是默认first

  6. LGP5493题解

    卡完常后来造福一下人类 如何从4.80s卡到920ms.jpg 本题解的复杂度为 \(O(\frac {n^{3/4}} {\log n})\),然而标算是 \(O(\frac {n^{2/3}} { ...

  7. 10 分钟讲完 QUIC 协议。

    建议阅读本文需要搭配作者 HTTP 相关文章食用. 历史 HTTP 系列文章: 看完这篇HTTP,跟面试官扯皮就没问题了 HTTP 2.0 ,有点炸 ! 这里先来回顾一下 HTTP 的发展过程.首先, ...

  8. AQS 详解之共享锁模式

    概括 AQS框架数据结构是一个先进先出的双向队列,当多个线程进行竞争资源时,那些竞争失败的线程会加入到队列中.他向上层提供了很多接口,其中一个是acquireShared获取共享模式的接口.本文将会根 ...

  9. Python之GUI用户界面Tkinter(一)

    Label Label(标签)组件用于在屏幕上显示文本或图像,仅能显示单一字体的文本 •参数 Label(master=None, **options) (class)**options 组件选项,下 ...

  10. 采用二进制文件方式安装loki和promtail

    1. 下载二进制文件 官方下载地址:https://github.com/grafana/loki/releases 下载如图所示的这俩文件,Grafana采用yum方式安装 cd /usr/loca ...