JS/jQuery--iframe框架内外元素的操作

原创 2017年12月07日 14:23:09
  • 28

两个问题:

  1. 如何在父页面操作iframe框架内的元素?
  2. 如何在iframe框架内操作父页面的元素?

解决上面两个问题的关键是,如何互相获取两者之间的document文档

如何在父页面操作iframe框架内的元素?

1.父页面获取子页面DOM: window.frames['iframe-name'].document

简单说明:

  1. 上段代码在父页面获取了整个子页面的document
  2. iframe-name是iframe的name属性
  3. 测试主流浏览器没有问题

2.子页面获取父页面的DOM: window.parent.document

  1. 上段代码在子页面获取了整个父页面的document
  2. 测试主流浏览器没有问题

3.几个注意事项

在获取子页面的时候往往需要onload的事件,简单的理解就是,如果iframe框架里边的内容加载没有完成,你是获取不到任何内容的

 //利用了Jquery.load方法
$('#child').load(function(){
$('#child_div',window.frames['child'].document).click(function(){
alert('加载完成');
$(this).css('background','red');
});
});

关于的用法(‘selector’[,context]) 第二个参数表示,该选择器的上下文

$('#child_div',window.frames['child'].document)

最新文章

  1. oracle 存储过程
  2. Nginx 安装以及反向代理配置(windows)
  3. PHP 小谈静态用法
  4. 笔记整理--Linux平台MYSQL的C语言
  5. Eureka介绍
  6. 【Java】 剑指offer(30) 包含min函数的栈
  7. error: command 'gcc' failed with exit status 1
  8. 【C#】读取Excel中嵌套的Json对象,Json带斜杠的问题(其二)
  9. JavaScript和它父亲的故事
  10. 【转】 CRC循环冗余校验码
  11. 数据库事物用法 SET XACT_ABORT ON
  12. 好记性比如烂笔头--linux学习笔记7关于linux中的shell脚本编程
  13. Runtime 打开记事本
  14. Debian/Kali 安装原生Firefox
  15. 如何使用Java代码给图片增加倒影效果
  16. SilverLight:基础控件使用(4)-日期显示和选择类控件
  17. 【Qt】2.1 创建对话框
  18. 关于maven pom
  19. ARM+llinux系统移植3G拨号上网收发短信(一)【转】
  20. 【Oracle】权限

热门文章

  1. 解决:在Eclipse中运行monkeyrunner脚本报错: IOError: (2, 'File not found - D:\\workspace\\monkeyrunner_test01 (\u62d2\u7edd\u8bbf\u95ee\u3002)')
  2. win7与vbox虚拟机Ubuntu设置共享文件夹
  3. Git_学习_09_指定某些文件不上传
  4. enumerate 枚举
  5. BeetleX高性能通讯开源组件
  6. Cow Exhibition (背包中的负数问题)
  7. 网页效果分析 VCD分解
  8. 机器学习:评价分类结果(ROC 曲线)
  9. Oracle RMAN 学习
  10. 【转】Rails中Bootstrap的安装和使用