iframe布局 详细用法 及缺点

最新推荐文章于 2024-04-24 09:22:16 发布
最新推荐文章于 2024-04-24 09:22:16 发布
阅读量1.4w 收藏 16
点赞数 2
分类专栏： JavaScript 文章标签： javascript iframe

frame与Iframe的各项属性  
frame例子：
<frameset cols="50%,*">
  <noframes>
   <body>
   Sorry,your explorer doesn't support the frame...
   </body>
  </noframes>
 <frame name="left" src="left.html">
 <frameset rows="*,30%">
    <frame name="right_top" src="right.html">
    <frame name="right_bottom" src="right2.html">
 </frameset>
</frameset>

    Iframe标记，又叫浮动帧标记，你可以用它将一个HTML文件嵌入在另一个HTML中显示。它不同于Frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件相互独立显示，而是可以直接嵌入在一个HTML文件中，与这个HTML文件内容相互融合，成为一个整体，另外，还可以多次在一个页面内显示同一内容，而不必重复写内容，甚至可以在同一HTML文件嵌入多个HTML文件。
　　在脚本语言与对象层次中，包含Iframe的窗口我们称之为父窗体，而浮动帧则称为子窗体，弄清这两者的关系很重要，因为要在父窗体中访问子窗体或子窗体中访问父窗体都必须清楚对象层次，才能通过程序来访问并控制窗体。
下面是浮动帧标记Iframe的各项属性：

一、基本语法：
　　<iframe>……</iframe>
　　浮动帧标记Iframe必须成对出现，即有开始标记<iframe>，就必须有结束标记</iframe>。

二、浮动帧标记Iframe的属性：

　1、文件位置：

　　语法：src=url
　　说明：url为嵌入的HTML文件的位置，可以是相对地址，也可以是绝对地址。
　　示例：<iframe src="iframe.html">

　2、对象名称：
　　语法：name=#
　　说明：#为对象的名称。该属性给对象取名，以便其他对象利用。
　　示例：<iframe src="iframe.html" name="iframe1">

　3、ID选择符：
　　语法：id=#
　　说明：指定该标记的唯一ID选择符。
　　示例：<iframe src="iframe.html" id="iframe1">

　4、容器属性：
　　语法：height=# width=#
　　说明：该属性指定浮动帧的高度和宽度。取值为正整数（单位为像素）或百分数。
　　height：指定浮动帧的高度；
　　width：指定浮动帧的宽度。
　　示例：<iframe src="iframe.html" height=400 width=400>

　5、尺寸调整：
　　语法：noresize
　　说明：IE专有属性，指定浮动帧不可调整尺寸。
　　示例：<iframe src="iframe.html" noresize>

　6、边框显示：
　　语法：frameborder=0、1
　　说明：该属性规定是否显示浮动帧边框。
　　0：不显示浮动帧边框；
　　1：显示浮动帧边框。
　　示例：<iframe src="iframe.html" frameborder=0>
　　　　　<iframe src="iframe.html" frameborder=1>

　7、边框厚度：
　　语法：border=#
　　说明：该属性指定浮动帧边框的厚度，取值为正整数和0，单位为像素。为了将浮动帧与页面无缝结合，border一般等于0。
　　示例：<iframe src="iframe.html" border=1>

　8、边框颜色：
　　语法：bordercolor=color
　　说明：该属性指定浮动帧边框的颜色。color可以是RGB色（RRGGBB），也可以是颜色名。
　　示例：<iframe src="iframe.html" bordercolor=red>

　9、对齐方式：
　　语法：align=left、right、center
　　说明：该属性指定浮动帧与其他对象的对齐方式。
　　left：居左；
　　right：居右；
　　center：居中。
　　示例：<iframe src="iframe.html" align=left>
　　　　　<iframe src="iframe.html" align=right>
　　　　　<iframe src="iframe.html" align=center>

　10、相邻间距：
　　语法：framespacing=#
　　说明：该属性指定相邻浮动帧之间的间距。取值为正整数和0，单位为像素。
　　示例：<iframe src="iframe.html" framespacing=10>

　11、内补白属性：
　　语法：hspace=# vspace=#
　　说明：该属性指定浮动帧内的边界大小。取值为正整数和0，单位为像素。两个属性应同时应用。
　　hspace：浮动帧内的左右边界大小；
　　vspace：浮动帧内的上下边界大小。
　　示例：<iframe src="iframe.html" hspace=1 vspace=1>

　12、外补白属性：
　　语法：marginheight=# marginwidth=#
　　说明：该属性指定浮动帧的边界大小。取值为正整数和0，单位为像素。两个属性应同时应用。
　　marginheight：浮动帧的左右边界大小；
　　marginwidth：浮动帧的上下边界大小。
　　示例：<iframe src="iframe.html" marginheight=1 marginwidth=1>
 
附.

iframe自适应高度和宽度

高度
<iframe name="myframe1" src="myframe1.htm" frameborder="0" scrolling="auto" width="100%" height="100%" οnlοad="document.all['myframe'].style.height=myframe.document.body.scrollHeight" ></iframe>

宽度
<iframe name="myframe2" src="myframe2.htm" frameborder="0" scrolling="auto" width="100%" height="100%" οnlοad="document.all['myframe'].style.width=myframe.document.body.scrollWidth" ></iframe>
 
iframe的链接目标

"myframe1.htm"内容
<a href="http://www.163.com" target=_parent>www.163.com</a>

"myframe2.htm"内容
<a href="http://www.163.com" target=myframe1>www.163.com</a>


在子窗口关闭时如何reload父窗口中的iframe

现有一页面main.htm,在其中的一个div中有一iframe(src="listdateServ"),当点击  faq-it.org/debian/main.htm一个button时弹出一窗口chi.htm,填完chi.htm中的form再点击一submit,转 
到savedateServ去处理，处理完后转到一页面saveOK.htm。现在我要在saveOK.htm关闭时reload  iframe,如何做？ 
--------------------------------------------------------------- 
 
在saveOK.htm中(它和chi.htm是同一页)不然就opener.opener... 
<body  οnbefοreunlοad="opener.document.frames['iframeName'].location.reload();return  true"> 

用子窗口控制父窗口
不多说，直接看代码：

父窗口：1.htm
<html>
<script language=javascript>

//插入表行
function insertRow1(){
 var tr1=f.insertRow();
 var td1=tr1.insertCell();
 var td2=tr1.insertCell();
 td1.innerText="1";
 td2.innerText="2";
}
</script>
<table id="f" border=1>
<tr>
 <td>1</td>
 <td>2</td>
</tr>
</table>
<input type="button" οnclick="window.open('2.html')">
</html>

子窗口：2.htm

<html>
<script language="javascript">
function d(){
 alert("ss");
 alert(opener);
}
</script>
<input type="button" οnclick="javascript:opener.insertRow1()">
</html>


如何在一个页面中的两个iframe中互相传值?
---------iframe A-----------
parent.window.frames["bFrameName"].xxx();

------------iframe B---------------
function xxx()
{
   alert("date")
}

另,所有的在同一目录下面：

第一个页面：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="content-type" content="text/html" charset="GB2312">
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" src=""></script>
<script language="javascript" type="text/javascript"></script>
</HEAD>

<BODY>
<table border="1" align="left" width="60%">
<tr>
<td><iframe name="fa" src="a.html"></iframe></td>
<td><iframe name="fb" src="b.html"></iframe></td>
<tr>
</table>
</BODY>
</HTML>
/************a.html*******************/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> aaaaaaaaa </TITLE>
<meta http-equiv="content-type" content="text/html" charset="GB2312">
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" src=""></script>
<script language="javascript" type="text/javascript">
function control()
{
parent.frames['fb'].document.getElementById("button").style.display = 'block';
}
</script>
</HEAD>
/************b.html*******************/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> bbbbbbbbbbb </TITLE>
<meta http-equiv="content-type" content="text/html" charset="GB2312">
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" src=""></script>
<script language="javascript" type="text/javascript"></script>
</HEAD>

<BODY>
<INPUT TYPE="button" NAME="" style="display:none;" id="button" value="I'm here here!~~~~~~~~">
</BODY>
</HTML>

<BODY>
<input type="button" value="Display" style="cursor:hand;" οnclick="control();return true;">
</BODY>
</HTML>

子窗口调用父窗口的javascript函数或其他

采用 使用iframe 方式

<!-- parent.html -->
<script language=javascript>
function funalert()
{
alert('OK');
}
</script>

<iframe name="myframe1" src="1.html" frameborder="0" border=0 scrolling="auto" width="100%" height="100%" οnlοad="document.all['myframe'].style.height=myframe.document.body.scrollHeight" ></iframe>

<!-- 1.html -->
<a href="http://www.163.com" target=_parent>www.163.com</a>
<input type=button οnclick="parent.funalert();self.close()" name=ddd value="OK">

如果没有使用iframe 方式,

<!-- parent.html -->
<a href=1.html target=_blank>Test</a>

<!-- 1.html -->
<input type=button οnclick="opener.funalert();self.close()" name=ddd value="OK">

问：
嵌入的iframe窗口如何改变父窗口中相应的iframe窗口的宽度和高度？
______________________________________________________________________________________________
答1：
if(top.location != self.location)
    {
      var a = window.parent.document.getElementsByName(self.name);
          a[0].height = document.body.scrollHeight;
          a[0].width  = document.body.scrollWidth;
    } 

______________________________________________________________________________________________
答2：
top.Myiframe.style.width=
______________________________________________________________________________________________
答3：
meizz(梅花雨) 理解错误拉

top.Myiframe.style.width对于iframe是没有这个属性的；

好容易找到了
Msgbox parent.RightFrame.self.frameElement.clientHeight
parent.RightFrame.self.frameElement.clientHeight=600——这句出错，原来还是个只读书性

=======================================================================

缺点：


很多网站设计都不会选用Iframe，这是为什么呢?也许新手还不知道它有什么坏处，相信你看完这篇文章就可以明白其中的原理。将Iframe用于网站设计是一种很不明智的做法，你可以尝试去点击Iframe布局的网站，你就能体会滚动条的麻烦了。

　　网站设计使用Iframe缺点一：得罪搜索引擎“蜘蛛”

　　网站设计使用Iframe最大的弊端就是得罪了搜索引擎的“蜘蛛”，当蜘蛛访问Iframe布局的网站时，它只会看到框架，框架里面的内容是看不到的，也就无法按照顺序解读页面，会认为这个网站是个死站点，以后绝不会再来了。

　　网站设计使用Iframe缺点二：链接导航问题

　　使用Iframe布局必须保证正确设定导航链接，否则，被链接的页面呈现在导航框架内，让浏览者无法退后，只能离开。

　　网站设计使用Iframe缺点三：分散访问者注意力

　　Iframe布局的网站除了有时会让浏览者迷惑，分散注意力之外，还会给浏览者带来浏览麻烦，滚动条会使Iframe布局混乱，让浏览者望而止步。

　　当然，也不是网站中完全不使用iframe，iframe还是有优点的，例如在静态页中可以导入动态内容，功能使用的方便等等。只要在适当的时候使用iframe就可以了.

菠菜面
关注
  • 2
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web响应式布局中iframe自适应的方法
09-28
响应式的概念应该是覆盖了自适应，但是包括的东西更多了。响应式布局可以根据屏幕的大小自动的调整页面的展现方式，以及布局。这篇问题给大家介绍了在web响应式布局中让iframe自适应的方法，有需要的朋友可以参考借鉴，下面来一起看看吧。
[前端 1] 使用frameset框架构建网页基本布局
该怎么解释？我懒得解释
03-27 7325
导读：在做项目的过程中，发现网页的一些地方是不变的，比如说顶部、底部。而变幻的内容就只是一部分。这个时候在想，这是每次都刷新一个界面呢，还是有别的快捷方法呢。然后就找到了frameset 这个东西。本篇博客是结合一个小实例对frameset的简单介绍。 一、是什么 frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，fram
iframe框架使用
jishuai6p的博客
01-25 235
通俗讲就是将一个页面嵌入另一个页面，可以是本地的html,jsp也可以是网址如baidu.com。
iframe窗口和form表单的应用
weixin_51526948的博客
06-09 801
form表单的type属性的元素以及iframe窗口的使用。
iframe 的使用理解
i_Satan的博客
04-19 3834
frame 用于在页面内显示页面，使用 iframe 会创建包含另外一个文档的内联框架（即行内框架）
iframe系统布局
natur_630的专栏
02-10 1114
通常系统分为三个功能模块区域 首先通常web.xml的欢迎页是index.jsp 通过重定向：<% response.sendRedirect("/main"); %> 具体的框架的发送请求方式不同，根据具体情况而定，由此请求，进入main.jsp页面 main.jsp的内容如下： <% String path = request.getContextPath(); St
使用frame制作左右分屏的页面
yahahassr的博客
03-12 3062
利用frame框架，将页面分为左右两部分，左边是导航，右边是显示页面，这是管理系统的常见布局。 效果如下 左边是导航，右边是页面，点击左边按钮，左边页面不变，右边页面在跳转。类似这样。 html代码如下。 &amp;lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta http-equiv=&quot
网页布局框架之Iframe
那一刻，那一夜，那一月，那一年，那一世
08-03 5755
网页布局框架之Iframe
iframe 布局
习惯向左的博客
03-19 2845
iframe 简单的使用 iframe.html <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" ...
iframe自适应高度+上导航下iframe布局+左固定右自适应布局
遇酒的博客
05-06 2551
直接上代码 iframe代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; *{
iframe上左右布局
热门推荐
sunny-Jin在路上
07-22 3万+
iframe框架布局。
iframe网页上下左右布局模板
03-04
iframe网页上下左右布局模板，可以修改里面的css代码来更改各个模块的大小，位置。很基本使用的网页布局模板
DIV CSS iframe 实现的主页布局
09-22
通过Div+CSS 结合Jquery制作的具有左侧菜单、导航菜单、下拉菜单、自动适应窗口大小、自动控制iframe高度，动态修改CSS样式，利用CSS的expression表达式，自动调整div大小，实现div左侧跟随的诸多布局应用。
Html中 IFrame的用法及注意点
11-28
1、首先来一个，跳出iframe的好方法，直接可以在Login.aspx页面使用。 if (window.parent.[IFRAME外壳的某方法]) { top.location.href = "Login.aspx"; } 2、再来段比较好看的iframe [removed] function ...
iframe详细用法
03-23
iframe详细用法iframe详细用法iframe详细用法iframe详细用法iframe详细用法
一个小时学习javaScript
weixin_43064364的博客
04-20 934
JavaScript 是一种广泛使用的编程语言，最初被设计来增加网页的交互性，让用户能够与网页上的元素进行互动。自从1995年被引入以来，JavaScript已经发展成为Web开发中不可或缺的一部分，并且其用途已经大大扩展到了网页之外。
JEECG表格选中状态怎么去掉
weixin_39031037的博客
04-19 589
官网代码（在取消选中状态的时候不生效）
vue2---修饰符
最新发布
weixin_45503872的博客
04-24 1002
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
JavaScript 高性能编程 —— Data Access 数据访问
cccloveforever的博客
04-20 1515
经典计算机科学的一个问题是确定数据应当存放在什么地方，以实现最佳的读写效率。数据存储在哪里， 关系到代码运行期间数据被检索到的速度。在 JavaScript 中，此问题相对简单，因为数据存储只有少量方 式可供选择。正如其他语言那样，数据存储位置关系到访问速度。每一种数据存储位置都具有特定的读写操作负担。大多数情况下，对一个直接量和一个局部变量数据访 问的性能差异是微不足道的。访问数组项和对象成员的代价要高一些，具体高多少，很大程度上依赖于浏 览器。
iframe移动端布局
06-06
在移动端布局中，可以使用CSS媒体查询来为不同的屏幕尺寸设置不同的样式。以下是一个示例： ```html <style> .iframe-wrapper { width: 100%; /* 设置iframe容器的宽度为100% */ height: 0; /* 设置iframe容器的高度为0，将在媒体查询中设置 */ padding-bottom: 56.25%; /* 设置iframe容器的高度为宽度的16:9比例 */ position: relative; /* 设置iframe容器的定位为相对定位，让其内部元素可以进行绝对定位 */ } iframe { position: absolute; /* 设置iframe元素的定位为绝对定位，让其填充整个容器 */ top: 0; left: 0; width: 100%; height: 100%; } /* 媒体查询：当屏幕宽度小于等于768px时，设置iframe容器的高度为200px */ @media (max-width: 768px) { .iframe-wrapper { height: 200px; } } </style> <div class="iframe-wrapper"> <iframe src="https://example.com"></iframe> </div> ``` 在上面的示例中，我们首先将iframe容器的宽度设置为100%，高度设置为0，并使用padding-bottom属性来设置其高度为宽度的16:9比例。然后，我们将iframe元素的定位设置为绝对定位，让其填充整个容器。 最后，我们使用媒体查询，当屏幕宽度小于等于768px时，将iframe容器的高度设置为200px。这样，在移动设备上查看页面时，iframe元素将以适当的尺寸显示在容器中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值