这里简单说明两个方法,都是未跨域情况下在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. HTML5应用缓存机制

    首先先上一张图: 用360浏览器的用户对这张图应该都是耳熟能详了吧,没错,当网络不通畅时使用360浏览器,便会有这张图弹出来.为什么没有网络还能弹出这一副画面呢?这就关乎HTML5的应用缓存机制了. ...

  2. EntityFramework之摸索EF底层(八)

    前言 此篇文章我将深入去摸索edmx中一些不为人知的东西,有时候我们需要知道Code  First模型中一些存储以及映射的原理,个人觉得那是必要的也是有用的,因为很有可能SQL会出现一些其他问题,只有 ...

  3. Util应用程序框架公共操作类(三):数据类型转换公共操作类(扩展篇)

    上一篇以TDD方式介绍了数据类型转换公共操作类的开发,并提供了单元测试和实现代码,本文将演示通过扩展方法来增强公共操作类,以便调用时更加简化. 下面以字符串转换为List<Guid>为例进 ...

  4. 如何用Excel直接查询Oracle中的数据

    将Oracle中查询的数据保存为Excel文件,通常使用的是PL/SQL Developer. 其实,Excel可直接写SQL语句查询Oracle中数据,在这里,用到ODBC驱动.详细步骤如下: 一. ...

  5. 开发中常用js记录(二)

    (1)获得asp.net控件的value值 document.getElementById('<%=SUKid.ClientID %>').value (2)获得选中值 $('#selec ...

  6. grape动态PHP结构(二)——管理后台

    一.概述

  7. ZOJ Problem Set - 1292 Integer Inquiry

    题目本身属于简单题,但是注意在输出的时候,题目很变态的对格式做了很多要求: 1.输入的N与下面的block有一个空行 2.每次输出与下一个输入的block有一个空行 3.但是特别注意,当是最后一个输出 ...

  8. Cesium应用篇:2影像服务(上)

    文章中相关范例下载路径:https://yunpan.cn/cByQqkANWN7Pu 访问密码 823d        Cesium中提供了多种ImageryProvider方式,来满足用户的实际需 ...

  9. jQuery打造智能提示插件二(可编辑下拉框)

    在上一篇 jQuery打造智能提示插件 上改进,增加下拉按钮,修复点击下拉区域外不隐藏BUG 效果 下拉按钮素材: js封装,注意红色部分为BUG修复,然后传入boxwidth不带px: /* /// ...

  10. 4.Java网络编程之TCP/UDP

    常见传输协议: UDP , TCP UDP协议:    特点:         1.将数据及源和目的封装成数据包中,不需要建立连接         2.每个数据包的大小限制在64K内         ...