分类: H5/JS/CSS

【推荐】iframe在跨域中实现自适应高度的问题，使用代理页2

[ 2014-09-20 09:30:29 | 作者: admin ]
字号: 大 | 中 | 小
p.s. 兼容性较好，使用简单，代理页改个框架ID，框架页尾部插几行脚本即可

主页面 http://www.xg98.com/main.htm 不做修改
<iframe id=iframe_main name=iframe_main width="100%" height="500" scrolling="no" frameborder="0" hspace="0" allowtransparency="true" src="http://blog.xg98.com/frame.htm" vspace="0"></iframe>

代理页，基本不用改动，只注意里面有调用主页面的框架id，这里是iframe_main http://www.xg98.com/proxy.htm
<title>本地代理页面</title>
</head>
<body>
     <script>
       var getObj=function(id,parent){
  return (parent?parent:document).getElementById(id);
       }
  var currHash="";
  var pParentFrame = getObj("iframe_main",top.document);
    setInterval(function(){
      var locationUrlHash =location.hash.substr(1); //抽取#符号后面的字符 如proxy.html#123 ，就得到123
      if(typeof locationUrlHash!="undefined"){
        if(locationUrlHash!=currHash){
        if(locationUrlHash){
            pParentFrame.style.height = locationUrlHash+"px";
          }
          currHash=locationUrlHash;
        }
      }
    },100)
     </script>
</body>
</html>

插入的框架页 http://blog.xg98.com/frame.htm 在末尾加上以下代码
<iframe id="iframe_bm_obj" name="iframe_bm_obj" src="" width="0" height="0" style="display:none;" ></iframe>
<script type="text/javascript">
function sethash(){
         var hashH = document.documentElement.scrollHeight;
         var urlC = "http://www.xg98.com/tools/proxy.html";
  var iframe_bm_obj = document.getElementById("iframe_bm_obj");
         iframe_bm_obj.src=urlC+"#"+hashH;
}
window.onload=sethash;
</script>
[最后修改由 admin， 于 2014-09-20 10:09:54]
评论Feed 评论Feed: http://blog.xg98.com/feed.asp?q=comment&id=2229

这篇日志没有评论。

此日志不可发表评论。