简单介绍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. 分布式系统下的CAP定理

    本文参考EricBrewer博客加上自己的理解整理. CAP定理又被成为布鲁尔定理,是加州大学计算机科学家埃里克·布鲁尔提出来的猜想,后来被证明成为分布式计算领域公认的定理. CAP定义,在高并发的场 ...

  2. pandas模块篇（终章）及初识mataplotlib

    今日内容概要 时间序列 针对表格数据的分组与聚合操作 其他函数补充(apply) 练习题(为了加深对DataFrame操作的印象) mataplotlib画图模块 今日内容详细 时间序列处理 时间序列 ...

  3. LeetCode-028-实现 strStr()

    实现 strStr() 题目描述:实现 strStr() 函数. 给你两个字符串 haystack 和 needle ,请你在 haystack 字符串中找出 needle 字符串出现的第一个位置(下 ...

  4. C# Event (1) —— 我想搞个事件

    本文地址:https://www.cnblogs.com/oberon-zjt0806/p/15975299.html 本文最初来自于博客园 本文遵循CC BY-NC-SA 4.0协议,转载请注明出处 ...

  5. eval()计算某个字符串,js和jquery都可以使用

    实例 执行JavaScript代码或表达式: <script>eval("x=10;y=20;document.write(x*y)");document.write( ...

  6. 浅识 npm 与 cnpm

    npm是什么? Node Package(包) Manager(管理器) 的简称. 在 GitHub 还没有兴起的年代,前端是通过网址来共享代码.比如你想使用 jQuery,那么你点击 jQuery ...

  7. Intel Quartus Prime Pro Edition 权限提升漏洞

    受影响系统:Intel Quartus Prime Pro Edition < 19.3描述:CVE(CAN) ID: CVE-2019-14603 Intel Quartus Prime Pr ...

  8. pyhon反射

    一:反射 1.python面向对象中的反射: 通过字符串的形式操作对象相关的属性.python中的一切事物都是对象(都可以使用反射) 2.四个内置方法 hasattr 检测是否含有某属性 getatt ...

  9. YCCMS 3.3 CSRF漏洞--代码执行

    一. 启动环境 1.双击运行桌面phpstudy.exe软件 2.点击启动按钮,启动服务器环境 二.代码审计 1．双击启动桌面Seay源代码审计系统软件 2.点击新建项目按钮,弹出对画框中选择(C:\ ...

  10. DDOS防御实验----反射器的安全配置

    0x01 环境 共包含三台主机 一台centos7.3 为attact主机,装有python +Scapy 一台centos7.3,server,装有bind9 ntp memcached,作为DDO ...