HTML iframe标签用法案例详解

目录
  • 一、iframe 定义和用法 
  • 二、属性
  • 三、示例 
    • 1、iframe框架
    • 2、iframe透明
    • 3、iframe自适应高度
    • 4、通过js输出iframe广告代码

        iframe一般用来包含别的页面,例如我们可以在我们自己的网站页面加载别人网站的内容,为了更好的效果,可能需要使iframe透明效果,那么就需要了解更多的iframe属性。

一、iframe 定义和用法 

       iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。 
HTML 与 XHTML 之间的差异 
在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中,不支持 iframe 元素。 
提示和注释: 
提示:您可以把需要的文本放置在 <iframe> 和 </iframe> 之间,这样就可以应对无法理解 iframe 的浏览器。 
iframe标签是成对出现的,以<iframe>开始,</iframe>结束 
iframe标签内的内容可以做为浏览器不支持iframe标签时显示 

二、属性

New :HTML5 中的新属性。

属性 描述
align left
right
top
middle
bottom
HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的元素来对齐 <iframe>。
frameborder 1
0
HTML5 不支持。规定是否显示 <iframe> 周围的边框。
height pixels 规定 <iframe> 的高度。
longdesc URL HTML5 不支持。规定一个页面,该页面包含了有关 <iframe> 的较长描述。
marginheight pixels HTML5 不支持。规定 <iframe> 的顶部和底部的边距。
marginwidth pixels HTML5 不支持。规定 <iframe> 的左侧和右侧的边距。
name name 规定 <iframe> 的名称。
sandboxNew ""
allow-forms
allow-same-origin
allow-scripts
allow-top-navigation
对 <iframe> 的内容定义一系列额外的限制。
scrolling yes
no
auto
HTML5 不支持。规定是否在 <iframe> 中显示滚动条。
seamlessNew seamless 规定 <iframe> 看起来像是父文档中的一部分。
src URL 规定在 <iframe> 中显示的文档的 URL。
srcdocNew HTML_code 规定页面中的 HTML 内容显示在 <iframe> 中。
width pixels 规定 <iframe> 的宽度。

三、示例 

1、iframe框架

代码如下:

<iframe src="https://www.test.net" width="200" height="500">
该网站使用了框架技术,但是您的浏览器不支持框架,请升级您的浏览器以便正常访问。
</iframe> 

2、iframe透明

在transparentBody.htm文件的<body>标签中,我已经加入了style="background-color=transparent" 通过以下四种IFRAME的写法我想大概你对iframe背景透明效果的实现方法应该会有个清晰的了解: 

代码如下:

<IFRAME ID="Frame1" SRC="transparentBody.htm" allowTransparency="true"></IFRAME>
<IFRAME ID="Frame2" SRC="transparentBody.htm" allowTransparency="true" STYLE="background-color: green"> </IFRAME>
<IFRAME ID="Frame3" SRC="transparentBody.htm"></IFRAME>
<IFRAME ID="Frame4" SRC="transparentBody.htm" STYLE="background-color: green"> </IFRAME> 

注:iframe是迫不得已才使用的,因为使用iframe会带来较多的问题,而有的浏览器可以设置将iframe当作广告屏蔽。 
在最近的一个工作内容中使用了iframe,开始遇到的问题是iframe高度自适应的问题,这问题在口碑网ued团队博客中找到了解决办法,后来更遇到一个iframe透明的问题 ,通常 iframe底色会是白色,在不同浏览器下可能会有不同的颜色,如果主页面有一个整体的背景色或者背景图片的时候 ,iframe区域便会出现一个白色块,与主体页面不协调,这就需要iframe透明 
通过google搜索iframe透明找到了解决办法 

代码如下:

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

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

[code] 

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

3、iframe自适应高度

由于篇幅过长,大家可以移步这里查看 

https://www.jb51.net/article/15780.htm

4、通过js输出iframe广告代码

[code] 

document.write('<iframe align=middle marginwidth=0 marginheight=0 src="http://img.jb51.net/imgby/468_1.htm" frameborder=no scrolling=no width=660 height=80></iframe>'); 

有时候我们需要考虑用户的浏览器是否支持iframe标签,那么就需要如下的写法

代码如下:

<iframe frameborder="0" name="Iframe1" src="https://www.jb51.net/" width="100%" height="200">
您的浏览器不支持嵌入式框架,或者当前配置为不显示嵌入式框架。
</iframe>

到此这篇关于HTML iframe标签用法案例详解的文章就介绍到这了,更多相关HTML iframe标签用法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • html判断当前页面是否在iframe中的实例

    在做HTML页面的时候,经常会遇到"如果当前页面显示在iframe中,我们就相应的处理" 判断方法为: //判断是否在iframe中 if(self!=top){ parent.window.location.replace(window.location.href); } 以上这篇html判断当前页面是否在iframe中的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 让iframe自适应高度(支持XHTML,支持FF)

    先说明,这个办法只限于iframe中的子页面也是本地页面(不能引用外网页面) ======方法===== 第一步 js部分 function getSize() {        var xScroll, yScroll;               if (window.innerHeight && window.scrollMaxY) {                      xScroll = document.body.scrollWidth;               yS

  • Vue 使用iframe引用html页面实现vue和html页面方法的调用操作

    当我们需要在vue中使用其他模块或者其他地方的一些html页面功能时,我们可以使用iframe去引用html页面,实现他们的交互 首先我们可以再vue页面中使用标签引用html页面 <template> <div> <iframe name="iframeMap" id="iframeMapViewComponent" width="100%" height="470px" v-bind:src=

  • js取得html iframe中的元素和变量值

    上周想要取得iframe中的元素和js变量值,一直没取得,查资料得知: 不能用$(document).ready()方法,而是要用$("#iframeId").load()方法,待iframe加载完成,才能取得 取iframe中的js变量值: document.frames['x'].y 这样便可以. 哎,很简单的问题,搞了很长时间,不应该啊!

  • js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]

    <iframe id= "myframe" ></iframe> W3C的标准告诉我们,可以通过Dom对象的contentDocument属性来返回文档对象. 即 复制代码 代码如下: doc= document.getElementById('myframe' ).contentDocument 但对IE浏览器来说,经过测试,IE6,IE7都不支持,IE8开始支持了. 在IE下,需要这样来访问 复制代码 代码如下: document.frames['myfra

  • 在Flex(Flash)中嵌入HTML代码或页面(Flex IFrame)

    在flex组件中嵌入html代码,可以利用flex iframe.这个在很多时候会用到的,有时候flex必须得这样做,如果你不这样做还真不行-- flex而且可以和html进行JavaScript交互操作,flex调用到html中的JavaScript方法以及获取调用后的返回值. 1.flex iframe下载地址:https://github.com/downloads/flex-users/flex-iframe/flex-iframe-1.5.1.zip 下载完成后目录如下  asdoc就

  • Html中 IFrame的用法及注意点

    0x01 iframe的跳出框架 0x02 iframe样式设置 0x03 iframe重置高度 1.首先来一个,跳出iframe的好方法,直接可以在Login.aspx页面使用. if (window.parent.[IFRAME外壳的某方法]) { top.location.href = "Login.aspx"; } 2.再来段比较好看的iframe <script type="text/javascript"> function SetWinHe

  • 让iframe自适应高度(支持xhtml)IE firefox兼容

    获取页面高度,窗口高度,滚动条高度等参数值 document.body.offsetHeight){ // all but Explorer Mac xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari xScroll = docume

  • 设置iframe的document.designMode后仅Firefox中其body.innerHTML为br

    重现如下: 复制代码 代码如下: <!doctype html> <html> <head> <title>设置iframe的document.designMode后仅Firefox中其body.innerHTML为br</title> <meta charset="utf-8"> </head> <body> <iframe frameborder="1" sty

  • HTML iframe标签用法案例详解

    目录 一.iframe 定义和用法  二.属性 三.示例  1.iframe框架 2.iframe透明 3.iframe自适应高度 4.通过js输出iframe广告代码         iframe一般用来包含别的页面,例如我们可以在我们自己的网站页面加载别人网站的内容,为了更好的效果,可能需要使iframe透明效果,那么就需要了解更多的iframe属性. 一.iframe 定义和用法         iframe 元素会创建包含另外一个文档的内联框架(即行内框架).  HTML 与 XHTML

  • Vue.js $refs用法案例详解

    尽管有 prop 和事件,但是有时仍然需要在 JavaScript 中直接访问子组件.为此可以使用 ref 为子组件指定一个引用 ID. ref 为子组件指定一个引用 ID,使父组件能通过 ref 直接访问子组件中的数据 通过 this.$refs.outsideComponentRef 能直接定位到 ref="outsideComponentRef" 的上,并返回该实例化对象 一.ref使用在外面的组件上 <div id="app"> <comp

  • MyBatis动态SQL标签用法实例详解

    1.动态SQL片段 通过SQL片段达到代码复用 <!-- 动态条件分页查询 --> <sql id="sql_count"> select count(*) </sql> <sql id="sql_select"> select * </sql> <sql id="sql_where"> from icp <dynamic prepend="where&quo

  • Python中return用法案例详解

    python中return的用法 1.return语句就是把执行结果返回到调用的地方,并把程序的控制权一起返回 程序运行到所遇到的第一个return即返回(退出def块),不会再运行第二个return. 例如: def haha(x,y): if x==y: return x,y print(haha(1,1)) 已改正: 结果:这种return传参会返回元组(1, 1) 2.但是也并不意味着一个函数体中只能有一个return 语句,例如: def test_return(x): if x >

  • Java ConcurrentHashMap用法案例详解

    一.概念 哈希算法(hash algorithm):是一种将任意内容的输入转换成相同长度输出的加密方式,其输出被称为哈希值. 哈希表(hash table):根据设定的哈希函数H(key)和处理冲突方法将一组关键字映象到一个有限的地址区间上,并以关键字在地址区间中的象作为记录在表中的存储位置,这种表称为哈希表或散列,所得存储位置称为哈希地址或散列地址. 二.HashMap与HashTable 1,线程不安全的HashMap 因为多线程环境下,使用HashMap进行put操作会引起死循环,导致CP

  • C++优先队列用法案例详解

    c++优先队列(priority_queue)用法详解 普通的队列是一种先进先出的数据结构,元素在队列尾追加,而从队列头删除. 在优先队列中,元素被赋予优先级.当访问元素时,具有最高优先级的元素最先删除.优先队列具有最高级先出 (first in, largest out)的行为特征. 首先要包含头文件#include<queue>, 他和queue不同的就在于我们可以自定义其中数据的优先级, 让优先级高的排在队列前面,优先出队. 优先队列具有队列的所有特性,包括队列的基本操作,只是在这基础上

  • CSS hack用法案例详解

    之前一直很狭隘的对CSS hack持有偏见,觉得写得规范的代码不应该使用这些"邪门歪道",可最近产品发布一个小问题却让我头疼了很久,最后查了一下资料,竟然使用CSS hack轻松解决了,不得不服啊,对付神奇的IE就得使用这些利器. 什么是CSS hack 由于不同的浏览器,甚至同一浏览器的不同版本对CSS的解析认识不一样,导致生成的页面效果不一致,写出针对不同浏览器CSS code就称为CSS hack. 常用的CSS hack 有三种方式,CSS 内部hack.选择器hack.HTM

  • C# Request.Form用法案例详解

    在CS文件中获得对应页面中的下拉框DropDownList_sitebranch值可以有以下几种方法获得: siteInfo.FZJGID = DropDownList_sitebranch.SelectedItem.Value.Trim(); siteInfo.FZJGID = Request.Form["DropDownList_sitebranch"].ToString(); siteInfo.FZJGID = Request["DropDownList_sitebra

  • C++ ostream用法案例详解

    概述 在 C++中,ostream表示输出流,英文"output stream"的简称.在 C++中常见的输出流对象就是标准输出流cout,很少自定义ostream的对象,更多的是直接使用cout.那么 ostream 有什么用呢,来看一个场景: class CPoint { public: CPoint(int x_,int y_):x(x_),y(y_){} int x,y; }; 这里定义了一个简单的类CPoint,如果我们实例化该类过后,想要打印对象的值: CPoint poi

  • C# Console.WriteLine()用法案例详解

    以前用Console.WriteLine()的时候就只会用它直接输出string字符串,但后来发现它还有其它在有些场合下会十分方便的输出方法,这篇就记录一下这些方法的使用吧. 代码格式我就不写了,因为写了也不好理解,所以直接上示例了.  ① static void Main(string[] args) { int i = 6; string s = "输出"; Console.WriteLine("{0}还可以这样{1}哦.", i, s); Console.Wr

随机推荐