- 浏览: 1040665 次
- 性别:
- 来自: 南京
文章分类
- 全部博客 (501)
- dwr (6)
- javascript (84)
- oracle (66)
- jsp/servlet (18)
- ant (3)
- 基础知识 (12)
- EXT (10)
- My SQL (10)
- java (71)
- spring (37)
- 学习的对象 (2)
- Linux (24)
- 面试 (1)
- HTML/CSS (11)
- tomcat (11)
- 收藏夹 (2)
- Power Designer (2)
- struts.xml配置文件 (1)
- sturts2 (3)
- myeclipse (8)
- eclipse (7)
- Maven (34)
- SVN (3)
- SAP JCO (2)
- JBOSS (11)
- webservice (8)
- word (1)
- 敏捷开发 (1)
- sybase (4)
- Nexus (3)
- EhCache (3)
- log4j (3)
- Cookie (4)
- Session (4)
- CXF (7)
- AXIS (2)
- SSO (1)
- LDAP (1)
- velocity (2)
- Jquery (5)
- redis (2)
- http (4)
- dojo (1)
- Linux资源监控软件mnon的安装与运用 (1)
- notepad++ (1)
- EA (1)
- UML (1)
- JasperReports (1)
- 权限 (0)
- freemarker (4)
- Spring MVC (1)
- JMS (1)
- activeMQ (1)
- hession (3)
- 安全 (1)
- ibatis (2)
- log (1)
- nginx (1)
最新评论
-
winhbb:
我刚好遇到了一个问题(在可以依赖注入的场合有效):有两个模块A ...
解决Maven项目相互依赖/循环依赖/双向依赖的问题 -
nanjiwubing123:
long3ok 写道你好 XmlOutputFormatter ...
用XStream转换复杂XML -
zhoujianboy:
另外一个方法实现eclipse tomcat 热部署:http ...
eclipse下实现maven项目在tomcat容器热部署方法 -
long3ok:
你好 XmlOutputFormatter 请问这个类是在什么 ...
用XStream转换复杂XML -
ganbo:
总结的好,文章给力。
解决Maven项目相互依赖/循环依赖/双向依赖的问题
页面域关系:
主页面a.html所属域A:www.kuqin.com
被iframe的页面b.html所属域B:www.ithao123.com,假设地址:http://www.ithao123.com/b.html
实现效果:
A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会变化的,所以需要a.html中的iframe自适应大小.
问题本质:
js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读取得到b.html的大小,A、B不属于同一个域,浏览器为了安全性考虑,使js跨域访问受限,读取不到b.html的高度和宽度.
解决方案:
引入代理代理页面c.html与a.html所属相同域A,c.html是A域下提供好的中间代理页面,假设c.html的地址:www.kuqin.com/c.html,它负责读取location.hash里面的width和height的值,然后设置与它同域下的a.html中的iframe的宽度和高度.
代码如下:
a.html代码
首先a.html中通过iframe引入了b.html
b.html代码
c.html代码
主页面a.html所属域A:www.kuqin.com
被iframe的页面b.html所属域B:www.ithao123.com,假设地址:http://www.ithao123.com/b.html
实现效果:
A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会变化的,所以需要a.html中的iframe自适应大小.
问题本质:
js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读取得到b.html的大小,A、B不属于同一个域,浏览器为了安全性考虑,使js跨域访问受限,读取不到b.html的高度和宽度.
解决方案:
引入代理代理页面c.html与a.html所属相同域A,c.html是A域下提供好的中间代理页面,假设c.html的地址:www.kuqin.com/c.html,它负责读取location.hash里面的width和height的值,然后设置与它同域下的a.html中的iframe的宽度和高度.
代码如下:
a.html代码
首先a.html中通过iframe引入了b.html
<iframe id=”b_iframe” height=”0″ width=”0″ src=”http://www.ithao123.com/b.html” frameborder=”no” border=”0px” marginwidth=”0″ marginheight=”0″ scrolling=”no” allowtransparency=”yes” ></iframe>
b.html代码
<script type=”text/javascript”> var b_width = Math.max(document.documentElement.clientWidth,document.body.clientWidth); var b_height = Math.max(document.documentElement.clientHeight,document.body.clientHeight); var c_iframe = document.getElementById(”c_iframe”); c_iframe.src = c_iframe.src+”#”+b_width+”|”+b_height; //http://www.kuqin.com/c.html#width|height” } </script> <!–js读取b.html的宽和高,把读取到的宽和高设置到和a.html在同一个域的中间代理页面车c.html的src的hash里面–> <iframe id=”c_iframe” height=”0″ width=”0″ src=”http://www.kuqin.com/c.html” style=”display:none” ></iframe>
c.html代码
<script type=”text/javascript”> var b_iframe = parent.parent.document.getElementById(”b_iframe”); var hash_url = window.location.hash; var hash_width = hash_url.split(”#”)[1].split(”|”)[0]+”px”; var hash_height = hash_url.split(”#”)[1].split(”|”)[1]+”px”; b_iframe.style.width = hash_width; b_iframe.style.height = hash_height; </script> a.html中的iframe就可以自适应为b.html的宽和高了.
发表评论
-
JSONEditor
2015-07-08 20:11 512JSONEditor: https://github.com/ ... -
Javascript开发调试
2014-07-08 10:08 697小谈chrome调试命令:console.log的使用 h ... -
利用Script实现JSONP跨域
2014-01-24 09:38 8761.什么是跨域 我们经常会在页面上使用ajax请求访问其他服 ... -
jQuery JSONP 跨域实践
2013-12-12 18:24 650jQuery JSONP 跨域实践 一客户端(url:htt ... -
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2013-10-17 09:35 677预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中 ... -
Js中escape(),encodeURI()和encodeURIComponent()使用和比较:
2013-09-12 09:42 995Js中escape(),encodeURI()和encodeU ... -
If-Modified-Since & If-None-Match
2013-04-27 13:24 820If-Modified-Since & If-None ... -
为什么JS文件带参数 JS后带参数什么意思
2013-04-27 11:20 1293我们经常在页面里会看到在加载的js或css文件带时文件后面常常 ... -
js实现网页图片延时加载的原理和代码
2013-04-23 11:52 962有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到 ... -
关于document.compatMode的一些介绍
2013-04-22 17:35 927对于document.compatMode,很多朋友可能都根我 ... -
js之事件冒泡和事件捕获
2013-04-20 10:03 1695事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差 ... -
js中addEventListener中第3个参数 .
2013-04-19 16:33 1581捕获阶段、目标阶段、冒泡阶段 addEventListener ... -
超链接在web开发中使用总结
2013-04-02 14:33 1092在工作中在前端页面的 ... -
JavaScript Module Pattern: In-Depth
2013-03-27 11:47 931Module difinition: http://www.a ... -
JQuery移除事件
2013-01-30 13:00 905移除事件 unbind(type [,data]) ... -
Js 冒泡事件阻止
2013-01-29 09:27 9631. 事件目标 现在,事 ... -
查找所有嵌套iframe .
2013-01-28 10:19 110001.//查找所有嵌套iframevar allIfrs = ... -
什么是同源策略
2012-12-12 11:15 1074一.什么是同源策略 ... -
js 编码,使用java解码方式
2012-10-30 11:02 1590使用两个方法:decodeURIComponent和escap ... -
Cookies
2012-05-04 10:10 1001ookies Cookies 集合设置 coo ...
相关推荐
www.baidu.com,假设地址:http://www.baidu.com/b.html 实现效果: A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会变化的,所以需要a.html中的iframe自适应大小....
NULL 博文链接:https://hugang357.iteye.com/blog/1833003
下面小编就为大家带来一篇小发现之浅谈location.search与location.hash的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分)...在我们的项目中,写了一个很简单的JavaScript基类来处理location.hash从而保存页面状态,今天在此就分享给大家。 (本文的内容可能
scrollHash-Willie.Smith.Chen 描述 滚动到Blaock时,然后更改location.hash! ## Demo页面
比如http://domain/#admin的location.hash=”#admin”。利用这个属性值可以做一个非常有意义的事情。 很多人都喜欢收藏网页,以便于以后... 那么,怎么用location.hash来解决这两个问题呢?其实一点也不神秘。 比如,我
分享转载:前端常见跨域解决...3、 location.hash + iframe 4、 window.name + iframe跨域 5、 postMessage跨域 6、 跨域资源共享(CORS) 7、 nginx代理跨域 8、 nodejs中间件代理跨域 9、 WebSocket协议跨域
单页后退前进刷新 jquery.hash.min.js 和 jquery.ba-hashchange.min.js
利用iframe和location.hash,数据直接暴露在了url中,数据容量和类型都有限 3.Flash LocalConnection, 对象可在一个 SWF 文件中或多个 SWF 文件间进行通信, 只要 在同一客户端就行,跨应用程序, 可以跨域。...
CRA location.hash路由器在此存储库中,我使用URL片段验证了有关客户机+服务器路由解决方案的想法。 这个想法是针对您的SPA是通过文件服务器(例如GitHub Pages)提供SPA的情况,而您不能为index.html设置一个...
location.hash 的路由器 文件 示例网址: : $router.path console . log ( $router . path ) ; // aaa/bbb/ccc?x=1&y=2&y=3&z $router . path = 'ccc/ddd' ; console . log ( $router . path ) ; // ccc/ddd $...
抓取out/jquery.hash.min.js文件并将其插入! 例子 DOM元素 $elem = $ ( "#myBeautifulDiv" ) ; hash_b64 = $elem . hash ( ) ; //same: $elem.hash({method: "base64"}); hash_sha1 = $elem . hash ( { method : ...
而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash=”#admin”。利用这个属性值可以做一个非常有意义的事情。 [removed].hash简单应用 一、#的涵义 #代表网页中的一个位置...
HL-DAQ:一种Hash学习的动态自适应量化编码.pdf
NULL 博文链接:https://baihe747.iteye.com/blog/2152459