javascript 中contentWindow和 frames和iframe之间通信
iframe父子兄弟之间通过jquery传值(contentWindow && parent),iframe的调用包括以下几个方面:(调用包含html dom,js全局变量,js方法)
主页面调用iframe;
iframe页面调用主页面;
主页面的包含的iframe之间相互调用;
主要知识点
1:document.getElementById("ii").contentWindow 得到iframe对象后,就可以通过contentWindow得到iframe包含页面的window对象,然后就可以正常访问页面元素了;
2:$("#ii")[0].contentWindow 如果用jquery选择器获得iframe,需要加一个【0】;
3:$("#ii")[0].contentWindow.$("#dd").val() 可以在得到iframe的window对象后接着使用jquery选择器进行页面操作;
4:$("#ii") [0].contentWindow.hellobaby="dsafdsafsdafsdafsdafsdafsadfsadfsdafsadfdsaffdsaaaaaaaaaaaaa"; 可以通过这种方式向iframe页面传递参数,在iframe页面window.hellobaby就可以获取到值,hellobaby是自定义的变量;
5:在iframe页面通过parent可以获得主页面的window,接着就可以正常访问父亲页面的元素了;
6:parent.$("#ii")[0].contentWindow.ff; 同级iframe页面之间调用,需要先得到父亲的window,然后调用同级的iframe得到window进行操作;
ie 中为 frames["id"]其他为document.getElementById("id").contentWindow
contentWindow属性是指指定的frame或者iframe所在的window对象
在IE中iframe或者frame的contentWindow属性可以省略,但在Firefox中如果要对iframe对象进行编辑则
必须指定contentWindow属性。
function EnableEdit()
{
var editor;
editor = document.getElementById("HtmlEdit").contentWindow;
// 针对IE浏览器, make it editable
editor.document.designMode = 'On';
editor.document.contentEditable = true;
// For compatible with FireFox, it should open and write something to make it work
editor.document.open();
editor.document.writeln('<html><head>');
editor.document.writeln('<style>body {background: white;font-size:9pt;margin: 2px; padding: 0px;}</style>');
editor.document.writeln('</head><body></body></html>');
editor.document.close();
}
<iframe ID="HtmlEdit" MARGINHEIGHT="1" MARGINWIDTH="1" width="100%" height="312">
</iframe>
<html>
<body>
<script>
var ifr = document.createElement("iframe");
document.body.appendChild(ifr);
var ifrdoc = ifr.contentWindow.document;
var s = fixingHTB.innerHTML; //进入可编辑模式前存好
ifrdoc.designMode = "on"; //文档进入可编辑模式
ifrdoc.open(); //打开流
ifrdoc.write(s);
ifrdoc.close(); //关闭流
ifrdoc.designMode ="off"; //文档进入非可编辑模式
</script>
</body>
</html>
javascript 中contentWindow和 frames和iframe之间通信的更多相关文章
- 简单理解javascript中的原型对象,实现对之间共享属性和行为
javascript中提供了构造函数.可以方便的创建对象. 典型的构造函数例如以下: function Person(name, age) { this.name = name; this.age = ...
- iframe之间通信问题及iframe自适应高度问题
下面本人来谈谈iframe之间通信问题及iframe自适应高度问题. 1. iframe通信 分为:同域通信 和 跨域通信.所谓同域通信是指 http://localhost/demo/iframe/ ...
- javascript中prototype、constructor以及__proto__之间的三角关系
三者暧昧关系简单整理 在javascript中,prototype.constructor以及__proto__之间有着“著名”的剪不断理还乱的三角关系,楼主就着自己对它们的浅显认识,来粗略地理理以备 ...
- JavaScript中利用Ajax 实现客户端与服务器端通信(九)
一:Ajax (Asynchronous JavaScript and XML)不是一个新的技术,事实上,它是一些旧有的成熟的技术以一种全新的更加强大的方式整合在一起 Ajax的关键技术: 1.使用X ...
- 深入剖析JavaScript中的对象与原始值之间的转换机制
我们都知道原始值之间是可以互相转换的,但是如果对象转原始值呢? 所有的对象在布尔上下文(context)中均为 true .所以对于对象,不存在 to-boolean 转换, 只有字符串和数值转换. ...
- JavaScript中变量、参数、函数之间的关系
------------------------------ 废话不多说,直接开始. 我们看一段代码(参考其他资料所得) <script type="text/javascript&q ...
- JavaScript中字符串与16进制之间的转换
一.字符串转换为16进制 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- iOS开发中的错误整理,线程之间通信练习,加载图片的练习中出现的错误 -- Http请求错误
控制台打印:Application Transport Security has blocked a cleartext HTTP (http://) resource load since it i ...
- Javascript中的一种深复制实现
在javascript中,所有的object变量之间的赋值都是传地址的,可能有同学会问哪些是object对象.举例子来说明可能会比较好: typeof(true) //"boolean&qu ...
随机推荐
- linux命令(39):ss命令
ss是Socket Statistics的缩写.顾名思义,ss命令可以用来获取socket统计信息,它可以显示和netstat类似的内容.但ss的优势在于它能够显示更多更详细的有关TCP和连接状态的信 ...
- graylog安装
官网:http://docs.graylog.org/en/2.4/pages/installation/os/centos.html Prerequisites Taking a minimal s ...
- LeetCode解题报告—— Regular Expression Matching
Given an input string (s) and a pattern (p), implement regular expression matching with support for ...
- poj 3616(动态规划)
Milking Time Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7265 Accepted: 3043 Desc ...
- Sort List——经典(链表中的归并排序)
Sort a linked list in O(n log n) time using constant space complexity. 对一个链表进行排序,且时间复杂度要求为 O(n lo ...
- 【hdoj_1085】Holding Bin-Laden Captive![母函数]
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1085 可以这样理解题意:给出1元,2元和5元的三种硬币若干,每种硬币数量给出,现在可以从所有的硬币中,选出 ...
- jquery.validate验证表单配合回调提交和h5.storage本地保存笔记
表单验证插件我使用:jquery.validate.js 支持中文提示,可扩展性强!教程地址 本地保存状态信息使用:h5提供的storage,浏览器支持5m的存储量,存储类型必须是string类型,并 ...
- 限制输入字符个数的jq插件
(function($) { $.fn.extend( { limiter: function(limit, elem) { $(this).on("keyup focus", f ...
- 8种json数据查询方式
你有没有对“在复杂的JSON数据结构中查找匹配内容”而烦恼.这里有8种不同的方式可以做到: JsonSQL JsonSQL实现了使用SQL select语句在json数据结构中查询的功能. 例子: ? ...
- Ubuntu18.04 安装Chrome浏览器
一路copy paste就OK sudo wget http://www.linuxidc.com/files/repo/google-chrome.list -P /etc/apt/sources. ...