这里简单说明两个方法,都是未跨域情况下在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的更多相关文章

  1. js如何获取跨域iframe 里面content

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 其中src可能存在跨域. 现有的获取方式   var test = document. ...

  2. 原生JS操作iframe里的dom

    转:http://www.css88.com/archives/2343 一.父级窗口操作iframe里的dom JS操作iframe里的dom可是使用contentWindow属性,contentW ...

  3. 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法,跨域调用JS不再是难题!

    谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个 ...

  4. js中各种跨域问题实战小结(二)

    这里接上篇:js中各种跨域问题实战小结(一) 后面继续学习的过程中,对上面第一篇有稍作休整.下面继续第二部分: -->5.利用iframe和location.hash -->6.windo ...

  5. 跨域iframe的高度自适应

    If you cannot hear the sound of the genuine in you, you will all of your life spend your days on the ...

  6. javascript跨域通信(一):利用location.hash实现跨域iframe自适应

    页面域关系: a.html所属域A:www.A.comb.html所属域B:www.B.com 问题本质: js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读 ...

  7. 跨域iframe高度计算

    一.同域获取iframe内容 这里有两个细节: 1. 取iframe内的文档对象,标准浏览器使用contentDocument属性,IE低版本(IE6,7,8)使用document属性. 2. cal ...

  8. js中各种跨域问题实战小结(一)

    什么是跨域?为什么要实现跨域呢? 这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源策略 ...

  9. 使用postMesssage()实现跨域iframe页面间的信息传递----转载

    由于web同源策略的限制,当页面使用跨域iframe链接时,主页面与子页面是无法交互的,这对页面间的信息传递造成了不小的麻烦,经过一系列的尝试,最后我发现有以下方法可以实现: 1. 子页面url传参 ...

随机推荐

  1. iOS-开发者相关的几种证书

    目录 引言 写在前面 一App IDbundle identifier 二设备Device 三开发证书Certificates 证书的概念 数字证书的概念 iOS开发证书 iOS开发证书的根证书 申请 ...

  2. Spring学习记录(四)---bean之间的关系:继承、依赖

         继承 这里说的继承和java的继承是不一样的,不是父类子类.但思想很相似,是父bean和子bean 1.父bean是一个实例时.它本身是一个完整的bean 2.父bean是模板,抽象bean ...

  3. 人之初,性本动 - G2 2.1 发布

    前言 随着可视化进入深水区,G2面临了越来越多交互上的需求.动画是提升交互必不可少的一部分,也是之前G2的薄弱环节.这个版本里我们开发并替换了动画底层,统一了时间轴,使G2的动画性能大大提升,并提供了 ...

  4. MongoDB 文档的查询和插入操作

    MongoDB是文档型数据库,有一些专门的术语,和关系型DB相似,但也有差异,例如,Collection类似于关系型DB的Table,document类似于row,key/value pair类似于c ...

  5. C#设计模式系列:命令模式(Command)

    1.命令模式简介 1.1>.定义 命令模式的目的是解除命令发出者和接收者之间的紧密耦合关系,使二者相对独立,有利于程序的并行开发和代码的维护.命令模式的核心思想是将请求封装为一个对象,将其作为命 ...

  6. [WPF]带下拉列表的文本框

    控件我已经弄好了,代码比较多,所以没办法全面介绍. 一开始我是直接继承Selector类来实现,做是做出来了,不过发现性能不太好.于是,我就想着自己来实现.毕竟我是做给自己用的,也不考虑过多的东西,也 ...

  7. 【原创】Aspose.Words组件介绍及使用—基本介绍与DOM概述

           本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/4288836.html 本博客其他.NET开源项目文章目录:http://www.cnbl ...

  8. ASP.NET WebForms MapPageRoute 路由配置

    MapPageRoute 应该是 ASP.NET 4.0 中的东西,但现在我是第一次使用它,使用场景是:MVC 混合使用 WebForm,然后对 WebForm 进行路由配置,当然也可以使用 ISAP ...

  9. hibernate笔记--双向一对多映射方法

    前两节写了两个例子,分别是单向多对一的映射和单向一对多的映射,这一节继续以这个例子讲一下双向一对多的映射方法,如下图所示: 很多时候,我们既想从一对端获取多对端的信息,又想从多对端获取一对端的数据,这 ...

  10. [python]CentOS 6下安装Python2.7

    安装方法 如果在CentOS上自己编译安装过python2.7,使用过程中会发现有些标准库没有安装之类的问题. 逛别人博客的时候发现,一个便捷的方法:使用RHSCL的全称是Red Hat Softwa ...