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 相关文章推荐
Maps Javascript
Jan 22 Javascript
用Javascript同时提交多个Web表单的方法
Dec 26 Javascript
javascript中的array数组使用技巧
Jan 31 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 Javascript
document.createElement()用法
Mar 13 Javascript
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
Sep 24 Javascript
Javascript实现汉字和拼音互转的终极方案
Oct 19 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
ES6 Generator基本使用方法示例
Jun 06 Javascript
vue制作toast组件npm包示例代码
Oct 29 Javascript
html中创建并调用vue组件的几种方法汇总
Nov 17 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 fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
jQuery实现类似淘宝购物车全选状态示例
2013/06/26 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
7个jQuery最佳实践
2016/01/12 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
js实现京东秒杀倒计时功能
2019/01/21 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
Python实现在线音乐播放器
2017/03/03 Python
python实现视频分帧效果
2019/05/31 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
2019/09/29 Python
Python列表元素常见操作简单示例
2019/10/25 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
移动端HTML5实现文件上传功能【附代码】
2016/03/25 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
测试工程师职业规划书
2014/02/06 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
聊一聊python常用的编程模块
2021/05/14 Python