JS未跨域操作iframe里的DOM


Posted in Javascript onJune 01, 2016

这里简单说明两个方法,都是未跨域情况下在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里的DOM 的相关知识,希望对大家有所帮助!

Javascript 相关文章推荐
jquery制作漂亮的弹出层提示消息特效
Dec 23 Javascript
javascript类型系统 Window对象学习笔记
Jan 07 Javascript
深入剖析JavaScript:Object类型
May 10 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 Javascript
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 Javascript
JS手写一个自定义Promise操作示例
Mar 16 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 Javascript
javascript实现画板功能
Apr 12 Javascript
jQuery实现的简单分页示例
Jun 01 #Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 #Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 #Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 #Javascript
有关jQuery中parent()和siblings()的小问题
Jun 01 #Javascript
深入理解ECMAScript的几个关键语句
Jun 01 #Javascript
星期几的不同脚本写法(推荐)
Jun 01 #Javascript
You might like
PHP 获取远程文件内容的函数代码
2010/03/24 PHP
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
jQuery 获取对象 定位子对象
2010/05/31 Javascript
学习JavaScript的最佳方法分享
2011/10/21 Javascript
js实现select跳转功能代码
2014/10/22 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
百度地图api如何使用
2015/08/03 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
Javascript OOP之面向对象
2016/07/31 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
详解html-webpack-plugin用法全解
2018/01/22 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
Python入门篇之列表和元组
2014/10/17 Python
python图像处理之镜像实现方法
2015/05/30 Python
Python基础语言学习笔记总结(精华)
2017/11/14 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
详解Python读取yaml文件多层菜单
2019/03/23 Python
利用python开发app实战的方法
2019/07/09 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
学生会干部自我鉴定2014
2014/09/18 职场文书
监护人证明
2015/06/19 职场文书
修辞手法有哪些?
2019/08/29 职场文书
Spring Boot 排除某个类加载注入IOC的操作
2021/08/02 Java/Android