博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
iframe 跨域高度自适应
阅读量:7233 次
发布时间:2019-06-29

本文共 2525 字,大约阅读时间需要 8 分钟。

hot3.png

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

解决方案:

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

实现方法:

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

A.html页面

(也可以是jsp页面)中嵌套C页面代码:

<iframe src="" id="iframe-content" name="ssymid" frameBorder=0 scrolling=no width="100%"></iframe>

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

B.html

/B.html(也可以是jsp页面)代理页面   注:代理页面要和A页面同域

页面内容:

 

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"">
<html xmlns="">
<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 = "/B.html";  //注:路径一定要是域名,使用IP无效
        document.getElementById("iframeC").src=urlC+"#"+hashH;
    }
    window.οnlοad=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           

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

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

转载于:https://my.oschina.net/u/1406232/blog/371347

你可能感兴趣的文章
最全面的百度地图JavaScript离线版开发
查看>>
tracert-命令小结
查看>>
爱上MVC~AuthorizeAttribute验证不通过如何停止当前上下文
查看>>
备忘录模式
查看>>
支付宝支付功能开发简易流程
查看>>
【服务器环境搭建-Centos】常用系统命令篇
查看>>
Swift用UIBezierPath来画圆角矩形、自定义多路径图形
查看>>
delphi FMX 数字下拉滑动
查看>>
重磅榜单!互联网金融Top100总估值超1.1万亿,27家独角兽上榜!
查看>>
cocos2d-x wp8 中文显示问题
查看>>
数字证书学习笔记
查看>>
Linux 文件与目录管理
查看>>
sublime3 docblocker插件定制自己的注释,配置步骤
查看>>
【Java并发编程】15、ReentrantLock实现原理深入探究
查看>>
什么是API网关?
查看>>
Linux上查看造成IO高负载的进程
查看>>
Ubuntu18.04 修改DNS
查看>>
Bjarne Stroustrup's C++ Style and Technique FAQ
查看>>
Rhel5.5配置Centos yum源
查看>>
Android 按键式事件
查看>>