iframe还是很强大的，不仅能实现同域通信，还可以跨域通信，甚至跨协议通信(如file/http)，如果再结合jsonp，那就有很多种玩法了。不过有几条原则需要记住：
1，当前层级中的任何Window都可以获取其他Window(iframe也是一个Window)
2，只有同域Window才可以互相操作
3，当前层级下的任何Window可以设置其他Window的location，即使是不同的域
4，当你改变url的hashtag(#后面的东东)时，页面不会刷新
举例来说，有这么个页面
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<!-- 不同域的iframe页面 -->
<iframe src="http://www.domain.com/foo" name="foo" id="foo"></iframe>
<iframe src="http://www.domain.com/bar" name="bar" id="bar"></iframe>
</body>
</html>
可以在当前页面设置proxy iframe的location(原则1,3,4)
// 添加了一个hashtag，这样该iframe就不会刷新
$('#foo').attr('src', 'http://www.domain.com/foo#tag');
iframe foo操作iframe bar(原则1,2)
// in http://www.domain.com/foo
$(parent.frames['bar'].document).find('#someid').html('message from foo');
所以跨域通信其实很简单，在iframe和主页里都不断地检测hashtag有没有变化，一旦有变化，就做出相应的改变。
setInterval(function() {
var hashVal = window.location.hash.substr(1);
document.body.style.backgroundColor = hashVal;
}, 1000);
这么做的问题就是，需要不断地去检测hashtag是否改变，效率有点低，如果能通过原生的监听来实现，就会更加高效和优雅。这里就涉及到另一个iframe特性：可以设置其他iframe的大小，即使是不同域的。而页面的resize事件是可以监听的，所以就有了下面这个模型。
主页面先把消息附加到hashtag，然后改变一个隐藏的(或者页面外的)iframe的size。这个iframe会监听resize事件，同时捕获到hashtag。捕获到hashtag后(也就是所需的数据)，再对hashtag做进一步的处理。处理完后把数据传到主页内的一个iframe，或者直接操作该iframe。这样就比较优雅地完成了跨域操作。
demo
将以下代码拷贝到本地的一个html文件，然后双击在浏览器中打开，看看能不能查单词。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function(){
$('#btn').click(function(){
$proxy = $('#proxy');
var src = $proxy.attr('src').split('#')[0];
$proxy.attr('src', src + '#' + $('input[name=it]').val());
$proxy.css('width', $proxy.width()+1+'px');
});
});
</script>
</head>
<body>
<input type="text" name="it"> <button id="btn">Translate</button>
<p></p>
<iframe src="http://demo.leezhong.com/crossdomain/proxy.html" name="proxy" id="proxy" style="position:absolute; top:-10px; width:1px; height:1px"></iframe>
<iframe src="http://demo.leezhong.com/crossdomain/show.html" name="show" id="show" style="width:60%;height:300px"></iframe>
</body>
</html>
本文转自http://hi.baidu.com/bee0873/blog/item/b5fb9f096c5a11db3ac76326.html
分享到：
相关推荐
当两个页面的主域相同但子域不同时，可以通过设置`document.domain`来实现跨域访问。例如，在`www.a.com/a.html`页面中，可以通过以下方式设置`document.domain`并与`www.script.a.com/b.html`进行通信： ```...
在JavaScript中，iframe元素常用于页面嵌套，但它们之间的交互受到同源策略的限制。同源策略是一项安全措施，防止不同源的脚本互相访问对方的私有数据，如...记住，跨域通信必须遵循安全原则，确保数据传输的安全性。
### JSONP在方案中心项目中的应用 #### 一、背景介绍与问题提出 随着Web技术的发展，AJAX...综上所述，JSONP作为一种简单有效的跨域解决方案，在不违反安全原则的前提下，有效地解决了方案中心项目中跨域通信的问题。
5. **跨窗口通信**：如果弹出层与`iframe`之间有交互，那么可能涉及到`window.postMessage`API，这是一个安全的跨域通信方式，允许父子`iframe`或主页面之间传递消息。 6. **事件监听**：为了响应用户的操作，如...
然而，有时候为了实现特定功能，如单点登录（SSO）或资源共享，开发者会利用`document.domain`属性来打破这种限制，允许跨子域的通信。本节主要探讨的是如何利用`document.domain`技巧进行跨子域操作，并结合一个...
RESTful是一种软件架构风格，基于HTTP协议，通过URI标识资源，用HTTP方法（GET、POST、PUT、DELETE）操作资源，实现无状态、统一接口的设计原则。 以上知识点涵盖了前端开发中关于HTTP协议、网络通信、Web标准和...
- **隔离失败**：虽然理论上浏览器应能完全隔离不同源的内容，但实际上通过链接属性（如`<img>`、`<iframe>`等）和远程JSON调用等方式，跨域网络访问变得可能，破坏了同源策略的有效性。 ### 安全模型的局限性示例 ...
- 当图片加载完成后，通过`window.onload`事件监听图片高度，并将IFrame的高度设置为图片的高度，以实现自适应布局。 - 最后，在页面的某个位置调用`showImg()`函数，传入图片URL，将IFrame插入到页面中。 这种...
若希望图片直接下载，可以通过设置响应头的Content-Disposition属性来实现。 Web Quality（无障碍）是确保网页内容对所有用户，包括视觉、听觉或动作受限的用户，都能访问的重要原则。BOM（浏览器对象模型）提供了...
JavaScript只能读取相同路径下的Cookie，但通过跨iframe的DOM操作，攻击者可能能从其他路径读取Cookie，因此路径限制并不能完全防止Cookie被盗。 4. **HttpOnly Cookie机制**： - HttpOnly标志可以防止JavaScript...
- 同源策略：限制跨域请求的原因及解决方案（CORS、JSONP、IFrame）。 6. 性能优化： - 代码优化：避免阻塞渲染、减少重排和重绘、利用异步加载。 - 性能监控：使用Chrome DevTools的Performance面板进行性能...
由于跨域安全限制，父页面与子页面之间可能存在通信障碍，导致在子页面中引用父页面的变量或对象时出现“对象未定义”的错误。在这种情况下，需要检查iframe的src属性，确保它们指向正确的URL，并且遵守同源策略。 ...
### 小米2019秋招前端开发笔试题知识点解析 #### 1. JavaScript 变量作用域与提升 **题目**: 下列代码输出结果正确的是:（c） `var val = 12;` `function fun1(){` ` console.log(val);` ` var val = 20;` ` ...