lucene321
- 浏览: 175348 次
- 性别:
- 来自: 北京
-
文章分类
- 全部博客 (140)
- java (138)
- 佳能500d (1)
- 佳能 (1)
- Oracle数据库文档构造器--Oraschemadoc (1)
- EJB调用的原理分析 (1)
- 使用css3画"静音"icon (1)
- 张小庆，在路上（16）-给弟弟找工作 (1)
- Android短信编解码方式 (1)
- lua web 开发 (1)
- zk安装 (1)
- 菜单多国语言化遇到的问题 (1)
- 【转】纯文本配置还是注册表 (1)
- C++ delete删除动态分配的内存 (1)
- eclipse下修改项目名导致tomcat内发布名不一致的解决方法 (1)
- Lucene实现各种常见文档的全文检索 (1)
- 项目风险之人员流动风险 (1)
- 时空数据模型简介 (1)
- XSLT学习笔记 (1)
- 依然是计划 如果没有计划似乎就没有了动力 (1)
- How to Succeed in A Professional Career (1)
- 编程环境应该和讨论社区完美的进行结合 (1)
- C#坦克大战实现 (1)
- 电脑用户密码忘记了怎么办? (1)
- java.lang.NoClassDefFoundError: org/dom4j/DocumentException (1)
- 关于成立北京Android爱好者俱乐部的声明 (1)
- Android开发之初探音频的播放 (1)
- Struts标签循环List (1)
- CAP原理 (1)
- javabean的自动生成 (1)
- 打开CMD一闪就关的解决方案 (1)
- 我是项目经理，我的项目管理日记【20111202】 (1)
- Html5游戏开发入门笔记--<躲砖块> (1)
- mysql中查看和设置系统字符编码 (1)
- PhoneGap-Accelerometer (1)
- [Jetty]Jetty工作原理 (1)
- Ibatis+Spring整合实例Demo+源码 (1)
最新评论
-
u012985907：
dsdsdsdsd
FLASH上传与拍照 -头像-avatart -
a379933101：
？？？？？？？？？？？？？？？？？？？？？？？？？？？？？
android listview 连续调用 getview问题分析及解决 -
151tmac：
拜托下次粘贴的时候，粘贴为纯文本
android listview 连续调用 getview问题分析及解决 -
liudezhong135：
...
Spring3MVC 在JSP中使用@ModelAttribute -
香飘飘2011：
要是不知道层次级别，如何退回到根目录呢
FTP退回到根目录
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
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
1
顶
顶
3
踩
踩
分享到：
发表评论
-
Ibatis+Spring整合实例Demo+源码
2012-02-08 12:58 1399<span style="color: ... -
[Jetty]Jetty工作原理
2012-02-07 17:29 992http://www.ibm.com/develo ... -
PhoneGap-Accelerometer
2012-02-07 14:23 1200采集设备在x、y、z方向上的动作。 acce ... -
mysql中查看和设置系统字符编码
2012-02-04 14:28 1705--查看数据库的字符集 show variables ... -
Html5游戏开发入门笔记--<躲砖块>
2012-02-03 12:04 1166学习了html5中的canvas画布元素，自己写了一个 ... -
我是项目经理，我的项目管理日记【20111202】
2012-02-03 10:19 988其实前段时间项目 ... -
打开CMD一闪就关的解决方案
2012-02-02 12:14 1385转：http://blog.163.com/cumt_ ... -
javabean的自动生成
2012-02-02 11:59 1397在jcreator pro中自动生成 在j ... -
CAP原理
2012-02-01 09:00 1147作者：NinGoo 原文链接：ht ... -
Struts标签循环List
2012-01-31 14:18 960<pre name="code&quo ... -
Android开发之初探音频的播放
2012-01-11 16:29 1083<h1>Android开发之初探音频的播放 ... -
关于成立北京Android爱好者俱乐部的声明
2012-01-11 14:33 859<blockquote dir="lt ... -
java.lang.NoClassDefFoundError: org/dom4j/DocumentException
2011-12-28 13:03 15091<span style="font-f ... -
电脑用户密码忘记了怎么办?
2011-12-28 12:14 979<span style="fon ... -
C#坦克大战实现
2011-12-20 13:29 1117记得在大学学java ... -
编程环境应该和讨论社区完美的进行结合
2011-12-19 11:54 760在学习.NET过程中，经常会遇到很多问题，有的时候会找 ... -
How to Succeed in A Professional Career
2011-12-19 10:29 728(From Microsoft)<br>& ... -
依然是计划 如果没有计划似乎就没有了动力
2011-12-15 10:39 877</span></span>& ... -
XSLT学习笔记
2011-12-14 14:04 664<p class="MsoNorma ... -
时空数据模型简介
2011-12-14 13:59 1479<p class="MsoNo ...
相关推荐
该文档介绍了vue和普通web页面中iframe实现跨域的解决方案，解决了主页面中无法调用iframe方法的问题
iframe+postMessage实现跨域通信 window.postMessage()方法安全地启用Window对象之间的跨源通信；例如，在页面和它产生的弹出窗口之间，或者在页面和嵌入其中的iframe之间。
iframe 跨域访问session问题解决方法
finereport是一款常用的表格制作软件/报表开发工具，本资源讲述在表格制作软件中实现iframe跨域单点登陆的具体实现方法，包括具体的操作步骤和实现代码等
MessengerJS-master(iframe跨域通信) MessengerJS-master(iframe跨域通信)
框架完美解决了iframe之间的跨域通讯。底层技术采用window.name转换代理实现
单点登录跨域iframe互相通信方案 ，内含详细步骤，可以实现不同源的域名互相通信。亲测，可用哦。也可以到我的博客查看具体操作步骤。
以前在面试的时候经常遇到问关于跨域的事儿，所以自己对跨域有一定的概念性了解，知道什么是跨域以及解决跨域的方法，但是具体实际从来没有操作过，直到最近在公司项目中，遇到了一个需要使iframe跨域进行POST提交的...
NULL 博文链接：https://hqlly.iteye.com/blog/1662337
iframe 跨域 自动适应高度；iframe 跨域 自动适应高度；
这是关于iframe使用过程中出现的问题整理的解决方法，关于使用iframe不用单独写接口打通数据，直接把数据通过ifarme嵌套方法传递过去，使用简单方便。
iframe 与主框架相互访问例子，包含同域访问，跨域访问例子。
iframe跨域问题：Uncaught DOMException Blocked a frame with origin解决方法
iframe跨域访问示例
通过HTTPClient界面在JSP中嵌入iframe子界面跨域时，无法获取跨域界面的属性值的问题
基于springmvc+maven+webservce+memecached 单点登陆实现，实现完全跨域、单点退出
1、为ScriptManager添加脚本引用，不从ScriptResource.axd中加载MicrosoftAjax.js脚本，而是直接加载 ~/ScriptLibrary/System.Web.Extensions/1.0.61025.0/MicrosoftAjax.js" /> 2、修改MicrosoftAjax....
iframe跨域，里面包含四个文件，具体使用方式参考代码，
在web开发中，跨域问题是经常遇到的，但是由于浏览器同源策略的限制，不同域之间属性和操作是无法直接交互的。本次讨论iframe和父页面的消息通信。
一般情况下都是用在同一域下的...但是如果请求是发生在不同的域下，请求就无法执行，并且会抛出异常提示不允许跨域请求,接下来介绍利用iframe实现ajax跨域通信感兴趣的朋友可以了解下，或许对你学习ajax跨域有所帮助