iframe标签的应用感觉很强大，但是有的低版本好像不是很兼容，所以有的时候需要注意这个的兼容问题，iframe 元素会创建包含另外一个文档的内联框架（即行内框架），他的属性有很多，也很容易理解，就不一一列举了，不过有的时候它的透明度却是一个难题，

<iframe src=”” allowtransparency=”true” style=”background-color=transparent” title=”” width=”” height=”” scrolling=”no”></iframe>

这样就能解决这个透明度问题了，前提是背景没有设置颜色。。。

它的自适应高度有的时候很难控制，这里需要一小段js代码即可。

<iframe src=”http://www.baidu.com” id=”frame” scrolling=”no” onload=”hehe()” ></iframe>

function show(){
var frame= document.getElementById(“frame”);
frame.height=document.documentElement.clientHeight;

}

function    hehe(){

show();

window.onresize=function(){
show();

}

}

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .hehe{

                height: 20px;

                width: 100px;

                background: pink;

                border: 1px solid black;

                cursor: pointer;

            }

            .changed{

                height: 600px;

                width: 100%;

            }

        </style>

    </head>

    <body>

        <div class="hehe" unselectable="on" onselectstart="return false;" style="-moz-user-select:none;">

                  点我试试

        </div>

        <div class="changHand">

            <iframe id="btn1"  width="100%" height="600px" scrolling="auto" frameborder="no"></iframe>

        </div>

    </body>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <script type="text/javascript">

    function click(){

         var n = 0;

        $(".hehe").on("click",function(){

                if(n%2 == 0){

                $("#btn1").attr("src","http://www.baidu.com");

            }

        else{

            $("#btn1").attr("src","");

        }

            n++;

        })

    }

        click();

    </script>

</html>

iframe的自适应的更多相关文章

  1. iframe高度自适应（同域）

    今天解决了iframe高度自适应的问题,不过这只是同域下的页面嵌入,以下是代码: function SetCwinHeight(){ var iframeid = document.getElemen ...

  2. iframe高度自适应

    前两天在网上看到了一道面试题,问iframe高度自适应的问题.发现自己之前几乎没有关注过iframe的问题,所以在这里记录一下. 原题目是: 页面A的域名是:http://www.taobao.com ...

  3. iframe高度自适应内容

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

  4. 完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】

    Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多 ...

  5. IFrame 高度自适应的两种方式 .

    iframe 高度自适应一般是指: iframe 本身的高度 =  内容高度. 这样做可以使最外层不出现滚动条. 如果网页内容使用了Ajax方式填充内容的话. 由于内容是动态的. 以上方式应该变为: ...

  6. 兼容firefox的iframe高度自适应代码

    网上关于iframe高度自适应的代码有很多,但比较杂乱,本文根据实用性整理了以下代码: JavaScript部分: 折叠JavaScript Code复制内容到剪贴板 <script type= ...

  7. 跨域iframe高度自适应(兼容IE/FF/OP/Chrome)

    采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...

  8. 跨域iframe高度自适应（兼容IE/FF/OP/Chrome）

    采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...

  9. jQuery实现iframe的自适应高度

    假设我们在当前页面要嵌套一个iframe 1 <iframe id="myframe" src="test.html" height="240& ...

  10. （转）iFrame高度自适应

    第一种方法:代码简单,兼容性还可以,大家可以先测试下: function SetWinHeight(obj) { var win=obj; if (document.getElementById) { ...

随机推荐

  1. Using Redis to store php session

    Using Redis to store php session 默认情况下,php将会将session信息存储在文件系统上,在单机情况下没有问题,但是当系统负载增大,或者在对系统可用性要求很高的场景 ...

  2. CSS实现DIV水平自适应居中

    DIV水平自适应居中 <!DOCTYPE html> <html lang="cn"> <head> <meta charset=&quo ...

  3. mysql优化要点（一）

    一  sql语句中使用函数需要注意,因为有可能结果每条语句都会调用,甚至表内每条记录都会调用. 二  注意转换,会消耗大量性能,甚至字符串的encoding不同,也会出现非常大的消耗 三  myisa ...

  4. 向JSP页面输入信息

    /** * ajax responseTEXT write; * @param request * @param response * @param str */ public static void ...

  5. Servlet学习四——传输文本

    在最初使用Servlet时,觉得get方法很好用,也了解到传输一般性的变量,除了文件流和安全性外,都可以用get方法,所以,也就习惯用get方法了. 在实现一个注册方法过程中,中文注册都是乱码,跟踪后 ...

  6. Parallel线程使用

    Parallel的静态For,ForEach和Invoke方法       在一些常见的编程情形中,使用任务也许会提升性能.为了简化编程,静态类System.Threading.Tasks.Paral ...

  7. js常用正则

    var sTest="xxxkdsj234dogdog1234xx"var reTest1=/(dog){2}/var reTest2 = /(?:dog){2}/;console ...

  8. 用纯css改变下拉列表select框的默认样式

    http://ourjs.com/detail/551b9b0529c8d81960000007 在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事 ...

  9. install LLVM

    version >= 3.8.0 $ cd llvm... $ mv someofClang ./tools $ mkdir build $ cd build $ cmake -DCMAKE_B ...

  10. C/C++入门---运算符

    1, 运算符的优先级 C语言的运算符共有15个优先级,各运算符及其优先级和结合律如下: 运算符 结合律 ()[]-> 从左到右 !~++ -- +(正号) -(负号) *(指针取址符) (typ ...