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动态加载js文件的方法
Dec 24 Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 Javascript
整理Javascript事件响应学习笔记
Dec 02 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 Javascript
Koa2微信公众号开发之消息管理
May 16 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 Javascript
layui的数据表格+springmvc实现搜索功能的例子
Sep 28 Javascript
JS实现无限轮播无倒退效果
Sep 21 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 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学习之 数组声明
2011/06/09 PHP
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
php 启动报错如何解决
2014/01/17 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
有趣的bootstrap走动进度条
2016/12/01 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
React路由管理之React Router总结
2018/05/10 Javascript
vue-router传递参数的几种方式实例详解
2018/11/13 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
python实现定时同步本机与北京时间的方法
2015/03/24 Python
详解Python with/as使用说明
2018/12/13 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
pyspark 随机森林的实现
2020/04/24 Python
scrapy框架携带cookie访问淘宝购物车功能的实现代码
2020/07/07 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
药学专业大学生自荐信
2013/09/28 职场文书
技术经理的自我评价范文
2013/12/03 职场文书
法律专业求职信
2014/05/24 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
2014年调度员工作总结
2014/11/19 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
学生退学证明
2015/06/23 职场文书
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫
vue动态绑定style样式
2022/04/20 Vue.js