- 浏览: 606238 次
文章分类
- 全部博客 (411)
- 常用工具 (21)
- 喜好 (14)
- 英语 (3)
- java (51)
- ext (4)
- css (44)
- php (34)
- window (7)
- jquery (21)
- js (31)
- struts (4)
- tomcat (1)
- struts2 (11)
- 网络 (4)
- c# (7)
- linux (27)
- oracle (15)
- tag标签 (5)
- 生成静态页面 (6)
- sql (12)
- hibernate (13)
- DesignPattern (3)
- spring (2)
- flex (17)
- excel应用 (1)
- 报表 (2)
- 业界 (2)
- 数据建模 (1)
- 平板 (1)
- ppt (1)
- rich (1)
最新评论
-
youngdze:
受教了,谢谢!
十步解决php utf-8编码 -
DiLiya:
感谢你的讲解;帮了大忙了!
解决-innerHTML无法在TBODY中使用 -
eppen:
强的没话说。帮了大忙。感谢goby2008 ,感谢google ...
解决-innerHTML无法在TBODY中使用 -
cxs4808:
rr
flex 设计模式 -
liuxingvsyou:
3个jQuery弹出窗口插件
页面域关系:
主页面a.html所属域A:www.taobao.com
被iframe的页面b.html所属域B:www.alimama.com
,假设地址:http://www.alimama.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.taobao.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.alimama.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.taobao.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.taobao.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的宽和高了.
其他一些类似js跨域操作问题也可以按这个思路去解决
发表评论
-
JQuery限制复选框checkbox可选中个数
2012-12-16 16:33 1479<script type="text/j ... -
IE和Firefox兼容的iframe刷新
2010-11-20 11:04 1377parent.document.getElementById( ... -
Firefox和IE之间7个JavaScript的差异
2010-08-12 15:59 696尽管 JavaScript 历史上使用冗长而令人生厌的代码块来 ... -
JS实用代码
2010-08-12 15:50 1144事件源对象 event.srcElement.tagName ... -
jQuery.inArray注意事项
2010-08-12 14:25 1437有这么一段程序: <script language=& ... -
CKEditor配置使用
2010-07-31 13:50 2548ckeditor 的官方网站是 http://ckeditor ... -
通过js读取或设置 FCKeditor中的值 js操作fckeditor
2010-07-30 00:26 1573FCKeditor确实挺好用,但却缺乏一个详细的开发文档,以致 ... -
关于用CSS区分Firefox、IE6、IE7
2010-07-16 15:44 798<html> <head> ... -
js 动态创建select 并赋予onchange事件
2010-06-30 17:20 2835function createSelect(iid,pid,n ... -
javascript对话框(弹出层)组件artDialog
2010-05-25 08:10 863http://www.planeart.cn/downs/ar ... -
用JavaScript检查文件是否存在
2010-05-13 15:11 1178function checkURL(URL) { ... -
JavaScript打印
2010-04-07 15:41 11161.JavaScript打印 <input id=&q ... -
JavaScript, AJAX树形控件大全(all kinds of TreeView Controls by JavaScript, AJAX)
2010-03-22 17:09 12181、dTree2、Treeview JavaScript3、Y ... -
javascript获取ul中li的个数
2010-03-04 13:06 2984有这样一段代码: <ul id="mycar ... -
15个基于Web的HTML编辑器
2009-09-11 23:26 730http://paranimage.com/15-web-ba ... -
父页面里两个iframe之间互相访问
2009-09-08 23:42 1989转载:http://hi.baidu.com/xeelytec ... -
JS压缩处理
2009-09-08 14:03 866试用几个工具,但是对语法要求比较高,有些js没法通过语法,固找 ... -
常用的js正则表达式
2009-07-24 14:10 1022把项目中最近用到的一些正则表达式总结一下。 1.验证身份证号 ... -
模仿abcnews.com制作新闻(图片展示)
2009-06-23 22:07 1145<!DOCTYPE html PUBLIC " ... -
用lightbox点亮html
2009-06-23 21:35 1125某人想要在点击链接的时候,弹出一个遮罩层。本来想直接使用lig ...
相关推荐
www.baidu.com,假设地址:http://www.baidu.com/b.html 实现效果: A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会变化的,所以需要a.html中的iframe自适应大小....
在JavaScript编程中,`window.location.hash` 是一个非常重要的属性,它用于获取或设置当前URL的哈希值,也就是URL中“#”后面的部分。这个属性在开发网页应用时经常被用来实现页面内的导航和锚点定位。这篇博客文章...
论location.search与location.hash的问题 在前端开发中,location对象的search和hash属性是两种常用的传参方式,但是它们之间的关系和应用场景却不太为人所知晓。本文将深入探讨location.search与location.hash的...
使用上述方法,可以在不违反同源策略的前提下,通过中间代理页面间接获取跨域页面的尺寸信息,并动态调整iframe的尺寸来实现自适应效果。这种方法既保证了安全性,也解决了跨域带来的限制问题。 具体到代码实现,...
* window.location.hash:获取 URL 的片断部分。 location.reload() 和 location.replace() 两个方法都可以用于刷新页面,但是它们之间有着明显的区别。location.reload() 方法用于重新加载当前页面,而 location....
本文将深入探讨如何实现IFrame跨域高度自适应的解决方案。 首先,我们需要了解什么是跨域。在Web安全策略中,浏览器执行同源策略,这意味着一个网页只能访问与之同源(协议、域名、端口相同)的IFrame内容。但当...
三、 location.hash + iframe 跨域 通过使用 location.hash,可以实现跨域通信。 四、 window.name + iframe 跨域 通过使用 window.name,可以实现跨域通信。 五、 postMessage 跨域 通过使用 postMessage,...
hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分)...在我们的项目中,写了一个很简单的JavaScript基类来处理location.hash从而保存页面状态,今天在此就分享给大家。 (本文的内容可能
在Java的集合框架中,HashMap是一种常用的键值对存储结构,它通过哈希表实现高效的数据查找、插入和删除操作。当HashMap达到其容量阈值并需要扩容时,会触发一个内部称为`rehash`的过程。这个过程涉及到将旧数组中的...
3. location.hash + iframe 跨域 4. window.name + iframe 跨域 5. postMessage 跨域 6. 跨域资源共享(CORS) 7. nginx 代理跨域 8. nodejs 中间件代理跨域 9. WebSocket 协议跨域 今天,我们主要讨论 jsonp 跨域...
在 jsp 页面中,我们可以使用 js 代码来实现 iframe 的高度自适应。下面是一个简单的示例代码: ```html <iframe id="agentFrame" name="agentFrame" src="" width="0" height="0" style="display:none;"></iframe>...
设置`iframe`的高度为这个值,即可实现自适应。 接下来,我们需要在`iframe`标签中添加`id`属性和`onload`事件监听器,以便在`iframe`内容加载完成后自动调用`adjustFrameSize`函数: ```html <iframe id="iframe1...
而 `jquery.hash.min.js` 和 `jquery.ba-hashchange.min.js` 这两个文件则是在 jQuery 基础上扩展了对浏览器 URL hash 变化的处理,从而实现单页面应用(Single Page Application, SPA)中后退和前进按钮的刷新功能...
比如http://domain/#admin的location.hash=”#admin”。利用这个属性值可以做一个非常有意义的事情。 很多人都喜欢收藏网页,以便于以后... 那么,怎么用location.hash来解决这两个问题呢?其实一点也不神秘。 比如,我
location.hash.substring(1) : ''; if (console.log) { console.log('Now the data is ' + data); } } catch (e) {} } setInterval(checkHash, 2000); ``` **`cs2.html`代码示例:** ```javascript //...
分享转载:前端常见跨域解决...3、 location.hash + iframe 4、 window.name + iframe跨域 5、 postMessage跨域 6、 跨域资源共享(CORS) 7、 nginx代理跨域 8、 nodejs中间件代理跨域 9、 WebSocket协议跨域
`scrollHash.js`的主要功能是监听页面滚动事件,当用户滚动到页面中的某个区块时,它会自动更新`window.location.hash`,使得浏览器URL显示对应的区块标识。这在多段式的长页面设计中特别有用,因为用户可以通过直接...