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. Android开源项目分类汇总

    目前包括: Android开源项目第一篇——个性化控件(View)篇   包括ListView.ActionBar.Menu.ViewPager.Gallery.GridView.ImageView. ...

  2. 如何使用Javascript判断浏览器终端设备

    WEB开发中如何通过Javascript来判断终端为PC.IOS(iphone).Android呢? 可以通过判断浏览器的userAgent,用正则来判断手机是否是ios和Android客户端 var ...

  3. Count(*)或者Count(1)或者Count([列]) 区别

    在SQL 中Count(*)或者Count(1)或者Count([列])或许是最常用的聚合函数.很多人其实对这三者之间是区分不清的.本文会阐述这三者的作用,关系以及背后的原理. 往常我经常会看到一些所 ...

  4. JS实现的随机显示图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  5. .net core 安装失败 的问题彻底解决

    解决方法: 已经整理好包:   https://pan.baidu.com/s/1dFuU80p 下载解压运行: DotNetCore.1.0.1-VS2015Tools.Preview2.0.2.e ...

  6. 9×9扫雷游戏代码-C写的

    #include <stdio.h> #include <stdlib.h> //画棋盘 a雷表 b周围雷数表 c打开表 ][],][],][]) { ,j=; ;i<; ...

  7. Android中的事件传递机制

    Android源码版本:API Level 19(Android 4.4) Android事件构成 在Android中,事件主要包括点按.长按.拖拽.滑动等,点按又包括单击和双击,另外还包括单指操作和 ...

  8. design philosophy

  9. VS2015 +EF6 连接MYSQL数据库生成实体

      VS2015 +EF6 连接MYSQL数据库生成实体   已安装软件:VS2015                       XAMPP Control Panel(Mysql服务器)      ...

  10. PL/SQL远程连接Oracle的方式,无需安装客户端

    第一次用PL/SQL Developer这个非官方的软件,遇到了种种困难,幸好通过万能的Google已经全部解决,记录下来备察． 前提是保证你的远程oracle服务器一切正常．   微软客户端设置 使 ...