JS操作未跨域iframe里的DOM
这里简单说明两个方法,都是未跨域情况下在index.html内操作b.html内的 DOM。
如:index.html内引入iframe,在index内如何用JS操作iframe内的DOM元素?
先贴下index.html和iframe引入的a.html内容。
index->
<div class="d1">
<iframe src="a.html" frameborder="0" name="one" id="iframeId"></iframe>
</div>
a.html
<div id="dd">
<h1>iframe里的元素!</h1>
</div>
法一:
var d=window.frames["one"].window;
d.onload=function(){
console.log(d.document.getElementById("dd"));
};
法二:
JS动态创建iframe并插入
var ifr = document.createElement('iframe');
ifr.src = 'a.html';
document.body.appendChild(ifr);
ifr.onload = function(){
var doc = ifr.contentDocument || ifr.contentWindow.document;
// 在这里操纵b.html
console.log(doc.getElementById("dd"));
};
两种的输出结果都是

JS操作未跨域iframe里的DOM的更多相关文章
- js如何获取跨域iframe 里面content
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 其中src可能存在跨域. 现有的获取方式 var test = document. ...
- 原生JS操作iframe里的dom
转:http://www.css88.com/archives/2343 一.父级窗口操作iframe里的dom JS操作iframe里的dom可是使用contentWindow属性,contentW ...
- 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法,跨域调用JS不再是难题!
谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个 ...
- js中各种跨域问题实战小结(二)
这里接上篇:js中各种跨域问题实战小结(一) 后面继续学习的过程中,对上面第一篇有稍作休整.下面继续第二部分: -->5.利用iframe和location.hash -->6.windo ...
- 跨域iframe的高度自适应
If you cannot hear the sound of the genuine in you, you will all of your life spend your days on the ...
- javascript跨域通信(一):利用location.hash实现跨域iframe自适应
页面域关系: a.html所属域A:www.A.comb.html所属域B:www.B.com 问题本质: js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读 ...
- 跨域iframe高度计算
一.同域获取iframe内容 这里有两个细节: 1. 取iframe内的文档对象,标准浏览器使用contentDocument属性,IE低版本(IE6,7,8)使用document属性. 2. cal ...
- js中各种跨域问题实战小结(一)
什么是跨域?为什么要实现跨域呢? 这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源策略 ...
- 使用postMesssage()实现跨域iframe页面间的信息传递----转载
由于web同源策略的限制,当页面使用跨域iframe链接时,主页面与子页面是无法交互的,这对页面间的信息传递造成了不小的麻烦,经过一系列的尝试,最后我发现有以下方法可以实现: 1. 子页面url传参 ...
随机推荐
- gulp启动一个小型web服务器配置&browserify(require)
var gulp = require('gulp'), connect = require('gulp-connect'), // 运行live reload服务器 browserify = requ ...
- 通过3个Hello World应用来了解ASP.NET 5应用是如何运行的(2)
对于上面创建的这个Hello World应用来说,程序入口点由应用自身来提供,所以应用本身具有自我执行的能力.从应用托管(Host)的角度来讲,这样的应用同时负责对自身的托管.将应用与托管环境独立起来 ...
- php使用js对表格进行排序
<!DOCTYPE> <html> <head> <meta http-equiv="Content-type" content=&quo ...
- 如何让你的网站支持https
如何让你的网站支持https 当今世界的主流网站基本都是使用https对外界提供服务,甚至有某些公司建议完全使用https, 那么https是什么呢?请参考如下的图解,https是在我们通常说的tcp ...
- struct 大小计算
结构体是一种复合数据类型,通常编译器会自动的进行其成员变量的对齐,已提高数据存取的效率.在默认情况下,编译器为结构体的成员按照自然对齐(natural alignment)条方式分配存储空间,各个成员 ...
- OracleSugar ORM框架的诞生,代码开源
经过四天的努力终于将SqlSugar ORM 成功支持ORACLE数据库 优点: 1.高性能,达到原生最高水准,比SqlHelper性能要高,比Dapper快30% 比EF快50% 2.支持多种数据库 ...
- 【原创】SQL审核系统
前言 应公司dba的需求,做了一个sql审核并可以执行.记录的系统,整个系统有三种角色: DBA(需要管理员手动登记) 运维人员(需要管理员手动登记) 开发人员(默认注册后用户) 权限分配如下: 一些 ...
- 为Linux重新开发MVC,有图有真相
1.写在前面 就连我们自己开始时也在问自己:我们为什么要开发一套MVC,微软的难道不可用用吗? 一开始的理由很简单.为了更好地跨平台部署;在Linux部署过.NET的人们应该知道, 部署起来是有点繁琐 ...
- WindowsCE project missing Microsoft.CompactFramework.CSharp.targets in Visual Studio 2008
00x0 前言 之前在Windows 7系统中开发的WindowsCE项目,最近换成Windows 10系统,需要将项目进行修改,打开项目后提示如下错误: 无法读取项目文件"App.cspr ...
- C#正则表达式通过HTML提取网页中的图片src
目前在做HoverTreeCMS项目中有处理图片的部分,参考了一下网上案例,自己写了一个获取内容中的图片地址的方法. 可以先看看效果:http://tool.hovertree.com/a/zz/im ...