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. Linux文件查找

    Linux下查找文件的命令有两个; locate: find : locate这个命令对其生成的数据库进行遍历(生成数据库的命令:updatedb),这一特性决定了查 找文件速度很快,但是locate ...

  2. 第十八周个人作业--The Final

    项目计划   完成这个项目需要的时间:5-7天项目开发  需求分析:    作为一名排球赛事管理者,我希望能够根据比赛查询每场比赛的结果,以便于确定每支球队的比赛名次.  设计文档    由排球比赛用 ...

  3. Network服务器

    1.授权服务器与非授权服务器:大多数网游都是授权服务器,用户无法修改数据.

  4. C# 获取本机CPU序列号，MAC地址，硬盘ID，本机IP地址，计算机名，物理内存，PC类型

    首先引入服务 然后 调用 本文转载自http://blog.sina.com.cn/s/blog_7eeb43210101hf7f.html public class Computer { publi ...

  5. Git常用命令整理

    .初始化一个Git仓库:git init 2.添加文件到Git仓库: git add <file> 添加文件到暂存区 git commit 把文件提交到版本仓库 3.查看工作区状态:git ...

  6. 无cookie下载Oracle otn上的sun jdk等软件

    从Oracle下载sun jdk提示:In order to download products from Oracle Technology Network you must agree to th ...

  7. php js => splice 数组 插入 功能

    php    array_splice 手册详解 array_splice   - 把数组中的一部分去掉并用其它值取代 参数 input 输入的数组. offset 如果 offset 为正,则从 i ...

  8. ios -网络加载json和本地加载json

    1网络加载json的时候,要在模型的实现文件里写: - (void)setValue:(id)value forKey:(NSString *)key { } 2本地加载json的时候,要在模型的实现 ...

  9. iOS 键盘类型

    版权声明:本文为博主原创文章.请尊重作者劳动成果,转载请注明出处. UIKeyboardTypeDefault: UIKeyboardTypeASCIICapable: UIKeyboardTypeN ...

  10. AD账号创建日期、最近一次登录时间、最近一次重置密码时间查询

    一:查询此AD域内所有用户的创建日期 Get-ADuser  -filter * -Properties * | Select-Object Name,SID, Created,PasswordLas ...