仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1211|回复: 8
打印 上一主题 下一主题

[HTML5] 来谈谈:iframe自顺应巨细

[复制链接]
逍遥一派 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:20:38 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
通过大家的心得,或许能找出"怎么学html5"这个问题的答案。另,我会不定期把群里面关于技术的讨论贴到本帖,敬请关注。网页制造poluoluo文章简介:js对跨域iframe会见成绩,由于要把持a.html中iframe的高度和宽度就必需起首读获得到b.html的巨细,A、B不属于统一个域,扫瞄器为了平安性思索,使js跨域会见受限,读取不到b.html的高度和宽度.
页面域干系
主页面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
<iframeid=”b_iframe”height=”0&Prime;width=”0&Prime;src=”http://www.alimama.com/b.html”frameborder=”no”border=”0px”marginwidth=”0&Prime;marginheight=”0&Prime;scrolling=”no”allowtransparency=”yes”></iframe>
b.html代码
<scripttype=”text/javascript”>
varb_width=Math.max(document.documentElement.clientWidth,document.body.clientWidth);
varb_height=Math.max(document.documentElement.clientHeight,document.body.clientHeight);
varc_iframe=document.getElementById(”c_iframe”);
c_iframe.src=c_iframe.src+”#”+b_width+”|”+b_height;//http://www.taobao.com/c.html#width|height”
}
</script>
<!&ndash;js读取b.html的宽和高,把读取到的宽和高设置到和a.html在统一个域的两头代办署理页面车c.html的src的hash内里&ndash;>
<iframeid=”c_iframe”height=”0&Prime;width=”0&Prime;src=”http://www.taobao.com/c.html”style=”display:none”></iframe>
c.html代码
<scripttype=”text/javascript”>
varb_iframe=parent.parent.document.getElementById(”b_iframe”);
varhash_url=window.location.hash;
varhash_width=hash_url.split(”#”)[1].split(”|”)[0]+”px”;
varhash_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跨域操纵成绩也能够按这个思绪往办理
</p>
通过大家的心得,或许能找出"怎么学html5"这个问题的答案。另,我会不定期把群里面关于技术的讨论贴到本帖,敬请关注。
山那边是海 该用户已被删除
沙发
发表于 2015-1-17 22:01:54 | 只看该作者
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
板凳
发表于 2015-1-26 23:18:40 | 只看该作者
使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
金色的骷髅 该用户已被删除
地板
发表于 2015-2-5 07:39:50 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
透明 该用户已被删除
5#
发表于 2015-2-11 08:23:37 | 只看该作者
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
若相依 该用户已被删除
6#
发表于 2015-3-2 05:05:16 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
小妖女 该用户已被删除
7#
发表于 2015-3-11 04:55:26 | 只看该作者
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
柔情似水 该用户已被删除
8#
发表于 2015-3-17 22:44:25 | 只看该作者
只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。
精灵巫婆 该用户已被删除
9#
发表于 2015-3-25 10:35:57 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-23 04:12

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表