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. java中 DigestUtils.md5Hex 的c#实现

    C# string target= "央行降息影响楼市:100万20年期房贷月供减少141元"; string result = Md5Helper.Md5Hex(aa); //r ...

  2. java:关于文件下载

    开发中遇到的问题 一. 场景描述:用户先指定下载路径,服务器将资源文件下载到指定的路径. 首先:该系统采用的是B/S架构,即浏览器.服务器(.数据库).    单纯通过B/S架构,就想要在服务器中去操 ...

  3. fedora 24下修改IP

    在ROOT环境下 cd /etc/sysconfig/network-scripts 找到类似  ifcfg-enp1s0的文件 sudo vi ifcfg-enp1s0 HWADDR=XX:XX:X ...

  4. python学习笔记4-redis multi watch实现锁库存

    python 关于redis的基本操作网上已经很多了,这里主要介绍点个人觉得有意思的内容1.redis的事务操作以及watch 乐观锁:后面描述2.tornado下异步使用redis的方式       ...

  5. Java 对文件的读取操作

    package pack; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; ...

  6. tomcat启动时 myeclipse控制台中文乱码

    情况1: tomcat中conf目录下有个叫server.xml的文件,里面 <Connector port="8080" protocol="HTTP/1.1&q ...

  7. 用shell在一个文件后面的每一行追加数据

    在shell分析log的时候,需要将数据过滤后转为csv的格式: 要在分析好的数据后面追加逗号: sed 's/$/&,/g' no2.log > ccc.log 结果保存在ccc.lo ...

  8. 冷门JS技巧

    前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前 ...

  9. SQL 分页

    sql = "SELECT TOP 10000 * " + " FROM(SELECT ROW_NUMBER() OVER(ORDER BY DataArticleID) ...

  10. C#中的?和??的用法

    1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; 是正确的,int i=null; 编译器就会报错.为了使值类型也 ...