js如何获取iframe页面内的对象
简单介绍iframe标签，所有的浏览器都支持<iframe>标签，iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。通常我们常用的iframe标签的属性有：width（iframe 的宽度）、height（iframe 的高度）、frameborder（显示框架周围的边框）、src（iframe 中显示的文档的 URL）。那么如何使用js来获取iframe页面内的对象呢，以及反过来说内嵌的iframe页面又该如何得到父级页面的对象？
注意地方：
- 需要在服务器下运行
- 父级页面须保证页面内容加载完毕，即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页面内的对象的更多相关文章
- 用js互相调用iframe页面内的js函数
http://www.jb51.net/web/18555.html 1,首先获得右栏iframe对象 var frames=document.getElementById("frameid ...
- 用JS或jQuery访问页面内的iframe,兼容IE/FF
用JS或jQuery访问页面内的iframe,兼容IE/FF js或者jQuery访问页面中的框架也就是iframe.注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.htm ...
- 用JS或jQuery访问页面内的iframe
用JS或jQuery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的!假设有两个页面,在相同域下.index.html 文件内含有一个iframe: <!DOCTYPE ...
- Js动态获取iframe子页面的高度////////////////////////zzzz
Js动态获取iframe子页面的高度 Js动态获取iframe子页面的高度总结 问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 ...
- js 获取iframe页面元素
js 获取iframe页面元素 CreationTime--2018年8月16日18点00分 Author:Marydon <!-- chart图表 --> <iframe id ...
- 获取Iframe页面高度并赋值给Iframe以及获取iframe里的元素
最近接手了别人的项目,别人用到了iframe,自己在实战中总结了一些关于iframe的小问题. 获取Iframe页面高度并赋值给Iframe Html <iframe name="co ...
- js/jquery获取当前页面URL地址并判断URL字符串中是否包含某个具体值
js/jquery获取当前页面URL地址并判断URL字符串中是否包含某个具体值本文介绍jquery/js获取当前页面url地址的方法,在jquery与js中获取当前页面url方法是一样的,因为jque ...
- Js/Jquery获取iframe中的元素
转载: Js/Jquery获取iframe中的元素 - - ITeye技术网站http://java-my-life.iteye.com/blog/1275205 在web开发中,经常会用到ifram ...
- js准确获取当前页面url网址信息
这篇文章主要为大家介绍了js准确获取当前页面url网址信息的多种方法,包括正则法.split拆分法等,需要的朋友可以参考下 在WEB开发中,时常会用到javascript来获取当前页面的url网址 ...
随机推荐
- 发现Spring事务的一个实锤bug，官方还拒不承认？你来评评理...
你好呀,我是歪歪. 事情是这样的,上周我正在全神贯注的摸鱼,然后有个小伙伴给我发来微信消息,提出了自己关于事务的一个疑问,并配上两段代码: 先说结论:我认为这是 Spring 事务的一个 bug.但是 ...
- if 、whitch、for、while
if 用于过程的判断 whitch用于值得判断 if { } else if { } else if //当此前的过程满足条件时,程序便不再判断其他过程,但是if{}if{}这样的写法程序会将每个过 ...
- 用Vue编写一个简单的仿Explorer文件管理器
大家一定很熟悉你桌面左上角那个小电脑吧,学名Windows资源管理器,几乎所有的工作都从这里开始,文件云端化是一种趋势.怎样用浏览器实现一个Web版本的Windows资源管理器呢?今天来用Vue好好 ...
- ELKB-ElasticSearch-Logstash-Kibana-beats 个人理解
先说一下ELK,E是ElasticSearch,L是Logstash,K是Kibana,还有一个Beats.按照从采集到展示的顺序介绍下各个组件的作用. 1.Beats Beats 是一个免费且开放的 ...
- WebGL 与 WebGPU比对[6] - 纹理
目录 1. WebGL 中的纹理 1.1. 创建二维纹理与设置采样参数 1.2. 纹理数据写入与拷贝 1.3. 着色器中的纹理 1.4. 纹理对象 vs 渲染缓冲对象 1.5. 立方体六面纹理 1.6 ...
- 防止SQL 注入；如何进行防SQL 注入。
防止SQL 注入:1.开启配置文件中的magic_quotes_gpc 和magic_quotes_runtime 设置2.执行sql 语句时使用addslashes 进行sql 语句转换3.Sql ...
- MySQL 8.0安装以及初始化错误解决方法
MySQL 8.0 安装配置及错误排查 官网下载 CentOS7环境下的具体安装步骤 初始化MySQL发生错误的解决方法 忘记数据库root密码 官网下载 mysql官网下载链接:https://de ...
- Ｗindows下搭建REDIS集群
Redis集群: 如果部署到多台电脑,就跟普通的集群一样:因为Redis是单线程处理的,多核CPU也只能使用一个核, 所以部署在同一台电脑上,通过运行多个Redis实例组成集群,然后能提高CPU的利用 ...
- LGP6008题解
题意有点儿绕? 容易发现,题意相当于在说,如果某一格有水,那么 ban 掉上一行后,让与其连同的所有格子被画上水. 所以我们从上到下枚举行,依次 ban 掉每一行,然后数连通块个数即可. 需要注意的是 ...
- 一步一步迁移ASP.NET Core 6.0-Part2
.NET 6 发布后,我们现有的应用会逐步升级到这个版本,首当其冲的是原因的ASP.NET Core的工程,如果一步一步升级到ASP.NET Core 6.0. 上一篇博文中,跟大家详细介绍了中间件. ...