• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html/xhtml > iframe 自适应大小实现代码

iframe 自适应大小实现代码

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-05

本文主要包含iframe,自适应等相关知识,佚名 希望在学习及工作中可以帮助到您
页面域关系:

主页面a.html所属域A:www.jb51.net
被iframe的页面b.html所属域B:www.jb51.cn,假设地址:http://www.jb51.cn/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.jb51.net/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.jb51.cn/b.html” frameborder=”no” border=”0px” marginwidth=”0″ marginheight=”0″ scrolling=”no” allowtransparency=”yes” ></iframe>

b.html代码

其他一些类似js跨域操作问题也可以按这个思路去解决

您可能想查找下面的文章:

  • web响应式布局中iframe自适应的方法
  • 浅谈Iframe网页内部的导航窗口
  • 举例讲解HTML中iframe和frame的区别
  • HTML中iFrame标签的两个用法介绍
  • 利用iframe在网页中显示天气附效果截图
  • a标签的target链接指向iframe的方法
  • 用jquery进行修复在iframe下的页面锚点失效问题
  • iframe框架在IE浏览器下将白色背景设为透明色
  • iframe截取网站部分内容实现思路及代码
  • 浅析用iframe来调用页面会不会缓存页面

相关文章

  • 2017-08-05input中id和name属性的区别示例介绍
  • 2017-10-05页面之前跳转 和页面之间传递参数
  • 2017-08-05HTML的表单form以及form内部标签的使用
  • 2017-08-05HTML教程:收集的常用的HTML标签(5)
  • 2017-08-05Form表单标签的Enctype属性的作用及应用示例介绍
  • 2017-08-05网页制作中使用规范的HTML代码的几点
  • 2017-08-05基础 HTML之目录问题(相对路径和绝对路径区别)
  • 2017-08-05xHTML与HTML标签的写法有哪些不同
  • 2017-08-05网页设计关于表单输入框的技巧代码
  • 2017-08-05一个手机自适应的网页效果解决显示页面很小的问题

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 正确使用HTML title属性的一些建议
    • html的table用法(让网页的视觉效果显示出来)
    • HTML blockquote 标签使用与美化
    • 网页制作中注意应用HTML标签的问题
    • WEB标准 网页页面结构
    • HTML 基本语法 方便刚开始学习html的朋友
    • Html+CSS绘制三角形图标
    • HTML减肥 精简HTML标记制作网页
    • W3C教程(2):W3C 程序
    • base target=""控制链接的目标打开框架

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有