精华内容
下载资源
问答
  • iframe标签

    2019-10-09 18:16:06
    iframe标签: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>iframe标签</title> </head> <body> <!--内联框架 iframe标签...

    iframe标签:

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8" />
        <title>iframe标签</title>
    </head>
    
    <body>
        <!--内联框架:
            iframe标签创建内联框架
            在页面中引入外部页面
            内联框架中的内容不被搜索引擎检索
            src:指向外部页面的路径
            width:指定内联框架宽度
            height:指定内联框架高度
            name:指定name属性
        -->
        <iframe src="./test.html" width="600px" name="otherContent"></iframe>
    </body>
    
    </html>
    
    展开全文
  • Iframe标签

    2019-05-28 08:18:43
    在页面内再次嵌套一个页面可以用到iframe标签,这个标签在网页版的后台控制系统中能够起到很大的作用,能避免多次的页面跳转,简单,快捷。 IFRAME是HTML标签,作用是文档中的文档,或者浮动的框架(FRAME)。iframe...

    在页面内再次嵌套一个页面可以用到iframe标签,这个标签在网页版的后台控制系统中能够起到很大的作用,能避免多次的页面跳转,简单,快捷。
    IFRAME是HTML标签,作用是文档中的文档,或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架(即行内框架)。
    含义作用:创建包含另外一个文档的内联框架
    支持浏览器:IE、Firefox、Chrome、Safari等
    标签定义及使用说明

    标签规定一个内联框架。 一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。 提示和注释 提示:HTML 与 XHTML 之间的差异:在HTML4.1 Strict DTD和XHTML1.0 Strict DTD中,不支持iframe元素。 可以把需要的文本放置在和之间,这样就可以应对无法理解iframe的浏览器。
    1. 属性 值 描述
    2. align left right top middle bottom HTML5 不支持。HTML 4.01 已废弃。
      规定如何根据周围的元素来对齐 。
    3. frameborder 1 0 HTML5 不支持。规定是否显示 周围的边框。
    4. height pixels 规定 的高度。
    5. longdesc URL HTML5 不支持。规定一个页面,该页面包含了有关 的较长描述。
    6. marginheight pixels HTML5 不支持。规定 的顶部和底部的边距。
    7. marginwidth pixels HTML5 不支持。规定 的左侧和右侧的边距。
    8. name name 规定 的名称。
    9. sandbox(#) “” allow-forms allow-same-origin allow-scripts
      allow-top-navigation 对 的内容定义一系列额外的限制。
    10. scrolling yes no auto HTML5 不支持。规定是否在 中显示滚动条。
    11. seamless(#)() seamless 规定 看起来像是父文档中的一部分。
    12. src URL 规定在 中显示的文档的 URL。
    13. srcdoc(#) HTML_code 规定页面中的 HTML 内容显示在 中。
    14. width pixels 规定 的宽度。

    然后是iframe的一个应用例子,在iframe标签内嵌套页面,并通过jQuery来更改iframe里面的页面。
    先用div包裹着iframe标签,并且div有着一定的大小宽高。然后是通过JavaScript来控制iframe的高度,高度是动态变化的

    <div class="container-fluid p-0">
         <iframe id="content"></iframe>
    </div>
    function setHeight() {
                var windowHeight = window.innerHeight;
            document.getElementById("content").style.height = (windowHeight - 110) + "px";
            }     减去110个像素是因为我这里有顶部的导航栏
    //窗口大小发生变化的时候及时调整iframe高度
            window.onresize = setHeight;
    //页面加载事件
            $(function () {
                //调用设置iframe高度的函数
                setHeight(); 
                //页面嵌套跳转
                $("#Html1").click(function () {
                    $("#content").prop("src", "/HTMLManagement/Html1/Html"); 
    /区域/页面的文件夹/页面
                });
            });
    
    展开全文
  • iframe 标签

    2012-04-18 11:31:00
    ... iframe标签是成对出现的,以&...iframe标签内的内容可以做为浏览器不支持iframe标签时显示 引用网址:http://www.dreamdu.com/xhtml/tag_iframe/ 属性 Common -- 一般属性 name -- 定义了内容页名称,...
    iframe 标签 -- HTML内联框架
    • iframe标签是成对出现的,以<iframe>开始,</iframe>结束
    • iframe标签内的内容可以做为浏览器不支持iframe标签时显示
    • 引用网址:http://www.dreamdu.com/xhtml/tag_iframe/
    • 属性
      • Common -- 一般属性
      • name -- 定义了内容页名称,此名称在框架页内链接时使用到
      • src -- 定义了内容页URL(同frame标签)
      • frameborder -- 定义了内容页的边框,取值为(1|0),缺省值为1
        • 1 -- 在每个页面之间都显示边框
        • 0 -- 不显示边框
      • height -- 框架的高度,取值像素或百分比
      • width -- 框架的宽度,取值像素或百分比
      • marginwidth -- 定义了框架中HTML文件显示的左右边界的宽度,取值为px,缺省值由浏览器决定
      • marginheight -- 定义了框架中HTML文件显示的上下边界的宽度,取值为px,缺省值由浏览器决定
      • scrolling -- 定义是否有滚动条,取值为(yes|no|auto),缺省值为auto
        • yes -- 显示滚动条
        • no -- 不显示滚动条
        • auto -- 当需要时再显示滚动条
      • align -- 垂直或水平对齐方式
      • longdesc -- 定义框架页的说明
    展开全文
  • IFrame标签

    2014-12-09 09:47:31
    最近遇到了一些问题,使用IFrame解决的,查了一些资料,感觉比较零散,做一个整理,以备后用。 定义和用法 iframe 元素会创建包含另外一个文档的内联框架(即行内... 标签的 align 属性" style="margin:0px; padd

    IFrame的一些功能,查了一些资料,感觉比较零散,做一个整理,以备后用。

     

    定义和用法

    iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。

    属性

    new : HTML5 中的新属性。

    属性

    描述

    align

    ·         left

    ·         right

    ·         top

    ·         middle

    ·         bottom

    不赞成使用。请使用样式代替。

    规定如何根据周围的元素来对齐此框架。

    frameborder

    ·         1

    ·         0

    规定是否显示框架周围的边框。

    height

    ·         pixels

    ·         %

    规定 iframe 的高度。

    longdesc

    URL

    规定一个页面,该页面包含了有关 iframe 的较长描述。

    marginheight

    pixels

    定义 iframe 的顶部和底部的边距。

    marginwidth

    pixels

    定义 iframe 的左侧和右侧的边距。

    name

    frame_name

    规定 iframe 的名称。

    sandbox

    ·         ""

    ·         allow-forms

    ·         allow-same-origin

    ·         allow-scripts

    ·         allow-top-navigation

    启用一系列对 <iframe> 中内容的额外限制。

    scrolling

    ·         yes

    ·         no

    ·         auto

    规定是否在 iframe 中显示滚动条。

    seamless

    seamless

    规定 <iframe> 看上去像是包含文档的一部分。

    src

    URL

    规定在 iframe 中显示的文档的 URL。

    srcdoc

    HTML_code

    规定在 <iframe> 中显示的页面的 HTML 内容。

    width

    ·         pixels

    ·         %

    定义 iframe 的宽度。

     

    Frame 对象的属性

    属性

    描述

    contentDocument

    容纳框架的内容的文档。

    frameBorder

    设置或返回是否显示框架周围的边框。

    id

    设置或返回框架的 id。

    longDesc

    设置或返回指向包含框架内容描述文档的 URL。

    marginHeight

    设置或返回框架的顶部和底部页空白。

    marginWidth

    设置或返回框架的左边缘和右边缘的空白。

    name

    设置或返回框架的名称。

    noResize

    设置或返回框架是否可调整大小。

    scrolling

    设置或返回框架是否可拥有滚动条。

    src

    设置或返回应被加载到框架中的文档的 URL。

    标准属性

    属性

    描述

    className

    设置或返回元素的 class 属性。

    dir

    设置或返回文本的方向。

    lang

    设置或返回元素的语言代码。

    title

    设置或返回元素的 title 属性。

    属性

    描述

    contentDocument

    容纳框架的内容的文档。

    frameBorder

    设置或返回是否显示框架周围的边框。

    id

    设置或返回框架的 id。

    longDesc

    设置或返回指向包含框架内容描述文档的 URL。

    marginHeight

    设置或返回框架的顶部和底部页空白。

    marginWidth

    设置或返回框架的左边缘和右边缘的空白。

    name

    设置或返回框架的名称。

    noResize

    设置或返回框架是否可调整大小。

    scrolling

    设置或返回框架是否可拥有滚动条。

    src

    设置或返回应被加载到框架中的文档的 URL。

    标准属性

    属性

    描述

    className

    设置或返回元素的 class 属性。

    dir

    设置或返回文本的方向。

    lang

    设置或返回元素的语言代码。

    title

    设置或返回元素的 title 属性。

     

    IFrame透明

    <iframesrc="./test.html" allowtransparency="true"style="background-color=transparent" title="test"frameborder="0" width="470" height="308"scrolling="no"></iframe>

    当然前提是iframe页面中没有设置颜色 


    注:iframe透明主要是使用了 allowtransparency="true"style="background-color=transparent" 

     

    iframe自适应高度

    对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的

    不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大 家一种iframe动态调整高度的方法,主要是以下JS函数:

    第一种方法:代码简单,兼容性还可以,大家可以先测试下:

    functionSetWinHeight(obj) { 
         var win=obj; 
    if (document.getElementById) { 
        if (win && !window.opera) { 
          if (win.contentDocument &&win.contentDocument.body.offsetHeight) 
            win.height =win.contentDocument.body.offsetHeight; 
          else if(win.Document &&win.Document.body.scrollHeight) 
               win.height =win.Document.body.scrollHeight; 
          } 
        } 

    最后,加入iframe,不能丢掉onload属性,当然了,id也必须也函数中的win匹配

    <iframe width="778"align="center" height="200" id="win"name="win" οnlοad="Javascript:SetWinHeight(this)"frameborder="0" scrolling="no"src="1.htm"></iframe> 

     

    第二种方法:

    <iframesrc="http://www.fufuok.com/" id="iframepage"name="iframepage" frameBorder=0 scrolling=no width="100%"onLoad="iFrameHeight()" ></iframe>

    Javascript代码: 
    <script type="text/javascript" language="javascript"> 
    function iFrameHeight() { 
       var ifm= document.getElementById("iframepage"); 
       var subWeb = document.frames ?document.frames["iframepage"].document :          ifm.contentDocument; 
       if(ifm != null && subWeb !=null) { 
          ifm.height =subWeb.body.scrollHeight; 
        } 

    </script> 

     

    IFrame父子页面相互调用js方法:

    当父页面和子页面都属于同一个域下,那么它们之间js方法是可以相互调用的。在调用方法前指定function所属对象即可,父页面获取iframe所属对象方法为:iframename.window,iframe页面获取父页面的对象为parent的。具体例子如下:

     

    父页面:parent.html

    <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <htmlxmlns="http://www.w3.org/1999/xhtml">

    <head>

    <metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

    <title>parent</title>

    <script>

             functionparentFunction() {

                       alert('functionin parent');

             }

     

             functioncallChild() {

                       child.window.childFunction();

                       /*

                                child为iframe的name属性值,

                                不能为id,因为在FireFox下id不能获取iframe对象

                       */

             }

    </script>

    </head>

    <body>

    <input type="button"name="call child" value="call child" οnclick="callChild()"/>

    <br/><br/>

    <iframe name="child"src="./child.html" ></iframe>

    </body>

    </html>

    子页面:child.html

    <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <htmlxmlns="http://www.w3.org/1999/xhtml">

    <head>

    <metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

    <title>child</title>

    <script>

             functionchildFunction() {

                       alert('functionin child');

             }

     

             functioncallParent() {

                       parent.parentFunction();

             }

    </script>

    </head>

    <body>

    <input type="button"name="call parent" value="call parent"οnclick="callParent()"/>

    </body>

    </html>

     

     

    IFrame与父页面传指:

             1)父页面获取iframe中的元素值: 

    Js代码  

    1. //根据iframeid获取对象  

    2. var i1 = window.frames['iframeId'];  

    3. //var iframe =window.frames[0];也可以  

    4. //获取iframe中的元素值  

    5. var val=i1.document.getElementById("t1").value  


    2)在iframe中获取父页面中的元素值: 

    Js代码  

    1. var val = parent.document.getElementById("txt1");   


    3a包含2iframe分别为b,c,现在从b中获取c中的元素的值: 

    Js代码  

    1. var i1 = parent.window.frames['iframeId'];  

    2. var val = i1.document.getElementById("text1").value;  


    注意下:上边的代码适用于ie。我在ie8下测试通过,Firefox3下运行不了(由于项目仅要求IE,不要求Firefox)。下边两句话引用网上其他朋友写的: 
    window.opener
    引用的是window.open打开的页面的父页面。   
    window.frames
    对象可以引用iframe里的页面,也可以引用frameset里的页面。

     

     


    展开全文
  • 本篇文章主要为大家介绍了关于HTML中的iframe标签是定义和使用的实例详情,还有...再来看看iframe标签的属性介绍:这有实例看看:这里使用了框架技术,但是您的浏览器不支持框架,请升级您的浏览器以便正常访问。使...
  • iframe标签iframe标签,内联框架元素 ,有效地将另一个HTML页面嵌入到当前页面中.例如加入以下代码即可在当前页面嵌套一个百度页面。不过,嵌套页面之后,当前html的页面加载速度就变慢了。结合标签QQgithub点击a,则...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,560
精华内容 2,224
关键字:

iframe标签