文档章节

iframe 跨域高度自适应

Release
 Release
发布于 2015/01/24 13:17
字数 700
阅读 41
收藏 0

问题描述:A页面现在要使用iframe嵌套一个不同域的C页面,A页面iframe的高度取决于C页面的高度,而C页面的高度不是确定的。所以A页面中的iframe要根据C页面的高度自动调整。

解决方案:

使用一个代理页面B来联通A和C这两个不同域的页面。

实现方法:

============================================================================

A.html页面

www.shz.com:8080/cms/iframe/A.html(也可以是jsp页面)中嵌套C页面代码:

<iframe src="http://www.cms.com/C.html" id="iframe-content" name="ssymid" frameBorder=0 scrolling=no width="100%"></iframe>

============================================================================

B.html

www.shz.com:8080/cms/iframe/B.html(也可以是jsp页面)代理页面   注:代理页面要和A页面同域

页面内容:

 

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>iframe代理页面</title></head>
<body>
<script>
function  pseth() {
    var iObj = parent.parent.document.getElementById(iframe-content);
    iObjH = parent.parent.frames["iframe-content"].frames["iframeC"].location.hash;
    iObj.style.height = iObjH.split("#")[1]+"px";
}
pseth();
</script>
</body>
</html>

=======================================================================

C.html页面

C.html(也可以以jsp页面)

在被嵌入的页面中加上一个display:none的iframe,指向代理页面

<iframe id="iframeC" name="iframeC" src="" width="0" height="0" style="display:none;" ></iframe>
<script type="text/javascript">
    function sethash(){
       var hashH = document.documentElement.scrollHeight; 
       var urlC = "http://www.shz.com:8080/cms/iframe/B.html";  //注:路径一定要是域名,使用IP无效
        document.getElementById("iframeC").src=urlC+"#"+hashH;
    }
    window.onload=sethash;
</script>

 =======================================================================

总结:iframe跨域高度自适应的问题,网上都是可以找到的,但是需要注意的就是被嵌入C页面隐藏的iframe的指向地址一定要为域名,不可以使用ip,使用ip是无效的。

但是我们一般都会在自己的电脑上测试,或者在测试机上测试。而自己的电脑和测试机一般都没有域名,我们经常适应Ip来访问。我们可以使用计算机操作系统自带的域名映射来实现,ip到域名的映射,具体方法如下:

1、找到系统的域名重定向文件:如C:\Windows\System32\drivers\etc 路径下的hosts文件

2、打开文件

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handled within DNS itself.
# 127.0.0.1       localhost
# ::1             localhost

3、在文件最后加上如下内容:

 10.124.8.208    www.cms.shz.com       

说明:前面是IP地址  后面是自定义的域名   两者要用空格隔开

通过以上三步,你就可以使用自定义的域名将之前访问地址中ip取代

© 著作权归作者所有

上一篇: oracle 分组查询
下一篇: oracle 递归查询
Release
粉丝 1
博文 13
码字总数 2909
作品 0
昌平
程序员
私信 提问
Iframe高度自适应(兼容IE/Firefox、同域/跨域)

看转贴吧 但是需要说明的是,就是大家不要以为可以用这种方法来控制别人的网页,不行的 这个跨域虽说域名不一样,但必须都是你的,也就是你可以修改的才行,这个跨域这种方法可以实现,但是如...

thinkgood
2013/10/14
0
0
跨域实现IFRAME自适应高度~续(终级)

IFRMAE请求一个跨域时,而这个跨我们没有操作权限,我们只有加一个HTML文件的权限,如何实现自适应行高 这需要一个中间页面iframe.html 原理:通过改变top.location的hash值,来实...

mcy247
2017/12/06
0
0
iframe高度自适应内容

JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。 如果内容是固定的,那么我们可以通过CSS来给它直接...

银月光海
2016/05/23
27
0
JavaScript 处理Iframe自适应高度的问题

1.同域名下Iframe自适应高度的处理 当然此处我用的是Asp.Net MVC 此处src设置为路由结构

aehyok
2013/03/28
0
0
如何设置iframe高度自适应,在跨域的情况下能做到吗?

  在页面上使用iframe来动态加载页面内容是网页开发中比较常见的方法。在父页面中给定一个不带滚动条的iframe,然后对属性src指定一个可加载的页面,这样当父页面被访问的时候,子页面可以...

恐空控
2013/09/01
0
1

没有更多内容

加载失败,请刷新页面

加载更多

二进制位操作

单片机,或者一些模块的设置操作,都是由一个字节数据来完成,每位各有定义。就需进行位操作来组合需要的数字结果。 以JavaScript为例,编写位操作。 我们期望得到这样一个二进制数:0101101...

format
20分钟前
2
0
聊聊中国的通信行业:从“七国八制”到“中华”脊梁

本期文章和大家一起来聊一聊我曾经从事过的通信行业吧。最近各方面信息的泛滥,包括和华为的同学聊天,自己确实也感慨颇多。想想我自己本科主修通信工程,研究生再修信息与通信工程,从本科开...

CodeSheep
今天
6
0
MDK:ARM M451M:exceed the range of code meory, continue to erase or not?

问题: 代码空间超限 几天前就遇到:exceed the range of code meory, continue to erase or not? 如下所示: 解决过程 开始以为中MDK软件的128KB限制,如是就不能生成HEX文件,应该链接时有提...

SamXIAO
今天
1
1
OSChina 周六乱弹 —— 因违反《中华人民共和国治安管理处罚法》第四十四条之规定

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @xiaoshiyue :#今日歌曲推荐# 惊艳分享谷微的单曲《安守本份》(@网易云音乐) 《安守本份》- 谷微 手机党少年们想听歌,请使劲儿戳(这里) ...

小小编辑
今天
495
12
Angular 英雄编辑器

应用程序现在有了基本的标题。 接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。 创建英雄组件 使用 Angular CLI 创建一个名为 heroes 的新组件。 ng gener...

honeymoose
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部