zoukankan      html  css  js  c++  java
  • Iframe自适应高度 同域/跨域 mvc3

    Iframe自适应高度 同域/跨域


      最近项目里要用到Iframe自适应高度的问题,当时就随手百度一搜,真的一大把抓,但是发现代码到我手里只要访问下属网站的dom属性时就都报“没有权限 ,拒绝访问”的错误,头大了,后来发现,原来是http安全因素的考虑,不允许跨域访问其他网站的属性,想想也是,不然,谁还不都可以访问其他的网站后一顿子乱改去。现把网上收集的解决方法整理一下。

    1:同域

    在同一个域名下,安全因素不是问题,自己访问自己的dom属性是允许的。直接贴网上的代码:

    <iframe id="iframepage" name="iframepage"  frameborder="0" scrolling="no" width="100%" src="/controller/action" onLoad="SetCwinHeight(this)">
      </iframe>

    function SetCwinHeight(iframeObj) {
                if (document.getElementById) {
                    if (iframeObj) {
                        this.height = iframepage.document.body.scrollHeight;
                        if (iframeObj.contentDocument && iframeObj.contentDocument.body.offsetHeight) {
                            iframeObj.height = iframeObj.contentDocument.body.offsetHeight + 20;
                        } else if (document.frames[iframeObj.name].document && document.frames[iframeObj.name].document.body.scrollHeight) {
                            iframeObj.height = document.frames[iframeObj.name].document.body.scrollHeight + 20;
                        }
                    }
                }
            }

    网上还有很多其他的同域自适应高度的代码。。。

    2:跨域

    感谢网上各位大虾的博文,不然我还在找门。。。下面是自己的学习心得。

    实现原理:比如现在有两个网站域名分别为A.com;  B.com;  A网站有个Iframe,需要把B网站放到该Iframe中,但是Iframe的高度 得先获取B网站的页面高度,然后根据所获取的高度来修改A网站Iframe的高度值。  1: 是要在B网站(即下属网站)获取自己的页面的高度,  2:B网站没权限修改A网站的高度,需要一个中间页面,该中间页面可以修改A网站的高度,so.这个中间页面必须与A网站在同一个域下。

    A网站的关键代码:

    <iframe id="iframepage" name="iframepage"  frameborder="0" scrolling="no" width="100%" src="@ViewData["urlstr"]">
    </iframe>    //src是B网站的页面地址

    B网站的关键代码:

    在B网站下也加一个iframe,该iframe是为了导向A网站的中间页面,从而改掉A网站的Iframe高度。

    <!DOCTYPE html>
    <html>
    <head>

    <script type="text/javascript">

      $(function () {

        hashH = document.documentElement.scrollHeight; 
                urlC = "http://www.joantest.com:9001/Home/Agent";                           //为A域名的中间页面,此处一定要用域名,不能用Ip
                document.getElementById("MiddleIframe").src=urlC+"#"+hashH; 
            });

    </script>

    </head>
    <body>
        <div class="topTitle">
            .....
        </div>
        @RenderBody()
        <iframe id="MiddleIframe" name="MiddleIframe" src="http://www.joantest.com:9001/Home/Agent" width="0" height="0" style="display: none;">
        </iframe>
    </body>
    </html>

    中间页面的关键代码:

    该页面是在A域名下的一个文件,由上面的src知道我就是在A网站的HomeController下开了个Agent的方法

    <script type="text/javascript">   
        $(function () {
            var iObj = parent.parent.document.getElementById('iframepage');      //找到该域下的iframe然后修改其值
            iObjH = parent.parent.frames["iframepage"].frames["MiddleIframe"].location.hash;
            iObj.style.height = iObjH.split("#")[1] + "px";
        });    
    </script>

    这样就已经修改好了,但是在“为A域名的中间页面,此处一定要用域名,不能用Ip”这个地方的src,在一般的局域网的同一个网段内,一般都是IP地址访问网站的,所以这个地方还需要做一个域名映射,方法如下:

    在“C:\Windows\System32\drivers\etc”路径下,打开 hosts 文件

    如果这篇文章对您有帮助,您可以打赏我

    技术交流QQ群:15129679

  • 相关阅读:
    Android中LayoutInflater的使用
    m2014-architecture-webserver->百万记录级mysql数据库及Discuz!论坛优化
    m2014-architecture-imgserver->利用Squid反向代理搭建CDN缓存服务器加快Web访问速度
    m2014-architecture-imgserver->Lighttpd +mod_mem_cache的效果简直太好了
    m2014-architecture-imgserver->配置lighttpd mod_mem_cache 模块做静态资源服务器
    m2014-architecture-imgserver->Lighttpd Mod_Cache很简单很强大的动态缓存
    雅虎十四条
    java高新技术-基本数据类型拆装箱及享元设计模式
    java高新技术-可变参数与OverLoad相关面试题分析
    java高新技术-java5的静态导入与编译器语法设置
  • 原文地址:https://www.cnblogs.com/yeminglong/p/2935273.html
Copyright © 2011-2022 走看看