iframe 跨域高度自适应

问题描述: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取代

你可能感兴趣的:(跨域,iframe,高度,自适应)