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. 去掉IE下input的叉号

    IE10下的Input Text和谷歌下面的 input search 一旦输入内容,会在最右端出现一个叉号,点击后,内容就会自动清空,看似方便,其实有些场景并不需要,需要写代码清除掉. 代码如下: ...

  2. DataSet读取数据

    using System.Data; using System.Data.SqlClient; namespace ConsoleApplication3 { class Program { stat ...

  3. 一步一步学WebSocket (一) 初识WebSocket

    众所周知,Http协议是无状态的,并且是基于Request/Response的方式与服务器进行交互,也就是我们常说的单工模式.但是随着互联网的发展,浏览器与服务端进行双向通信需求的增加,长轮询向服务器 ...

  4. Linux内核中断学习

    1.内核中断概述 (1)在OS环境下编写中断处理函数与之前在裸机中编写中断处理函数的方式是不一样的,在Linux内核中提供了一套用来管理硬件中断资源的软件体系架构. (2)在操作系统中,中断号与gpi ...

  5. bootstrap制作搜索框及添加回车搜索事件

    下面是开发中用bootstrap制作的一个搜索框,以及给搜索框添加回车搜索事件的一个小案例. bootstrap制作搜索框及添加回车搜索事件 下面是功能实现的代码: <!DOCTYPE html ...

  6. 获取应用图标，Drawable 转bitmap

    获取应用图标: PackageManager p = context.getPackageManager(); Drawable draw=null; ApplicationInfo info; tr ...

  7. 配置 samba 实现文件共享

    用于实现文件共享 netstat -apn|grep smb 可以按到 smb服务,需要开启139 .445端口号 需要在防火墙添加如下规则vi /etc/sysconfig/iptables -A ...

  8. 【微信开发】常用 api

    [微信开发]api 一. 开发文档 二. 调试工具 三. api 1. 获取 token - https://api.weixin.qq.com/cgi-bin/token?grant_type=cl ...

  9. 带锁的3D切割轮播图

    3D切割轮播图. 加入锁,限制点击太快次数 <!DOCTYPE html><html><head lang="en"> <meta cha ...

  10. hdu 1398 Square Coins (母函数)

    Square Coins Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tota ...