`
yiyanwan77
  • 浏览: 187284 次
  • 性别: Icon_minigender_1
  • 来自: 威海
社区版块
存档分类
最新评论

iframe总结

JavaScriptHTML浏览器XHTMLCSS 
阅读更多

IFrame语法小全
IFrame语法小全  
IFrame可以在网页内嵌入另一个页面，类似“画中画”形式。

 

标记的使用格式是:

<Iframe  src="URL"  width="x"  height="x"  scrolling="[OPTION]"  frameborder="x"></iframe>  

src：文件的路径，既可是HTML文件，也可以是文本、ASP等；

width、height："画中画"区域的宽与高；

scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示;  

FrameBorder：区域边框的宽度，为了让“画中画“与邻近的内容相融合，常设置为0。

比如:  

<Iframe  src="http://www.xyz.com/xyz";;  width="250"  height="200"  scrolling="no"  frameborder="0"></iframe>

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

窗口与浮动帧之间的相互控制

在脚本语言与对象层次中，包含Iframe的窗口我们称之为父窗体，而浮动帧则称为子窗体，弄清这两者的关系很重要，因为要在父窗体中访问子窗体或相反都必须清楚对象层次，才能通过程序来访问并控制窗体。

1、在父窗体中访问并控制子窗体中的对象

在父窗体中，Iframe即子窗体是document对象的一个子对象，可以直接在脚本中访问子窗体中的对象。

现在就有一个问题，即，我们怎样来控制这个Iframe，这里需要讲一下Iframe对象。当我们给这个标记设置了ID  属性后，就可通过文档对象模型DOM对Iframe所含的HTML进行一系列控制。

比如在example.htm里嵌入test.htm文件，并控制test.htm里一些标记对象：

<Iframe  src="test.htm"  id="test"  width="250"  height="200"  scrolling="no"  frameborder="0"></iframe>  

test.htm文件代码为:  

<html>  

<body>  

<h1  id="myH1">hello,my  boy</h1>  

</body>  

</html>  

如我们要改变ID号为myH1的H1标记里的文字为hello,my  dear，则可用:  

document.myH1.innerText="hello,my  dear"(其中，document可省

)  

在example.htm文件中，Iframe标记对象所指的子窗体与一般的DHTML对象模型一致，对对象访问控制方式一样，就不再赘述。

2、在子窗体中访问并控制父窗体中对象

在子窗体中我们可以通过其parent即父（双亲）对象来访问父窗口中的对象。

如example.htm：

<html>  

<body  onclick="alert(tt.myH1.innerHTML)">  

<Iframe  name="tt"  src="frame1.htm"  width="250"  height="200"  scrolling="no"  frameborder="0"></iframe>  

<h1  id="myH2">hello,my  wife</h1>  

</body>  

</html>  

如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my  friend"，我们就可以这样写：

parent.myH2.innerText="hello,my  friend"  

这里parent对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。

Iframe虽然内嵌在另一个HTML文件中，但它保持相对的独立，是一个“独立王国“哟，在单一HTML中的特性同样适用于浮动帧中。

试想一下，通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或函数，减省了多少繁琐的手工劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需修改一个父窗体的版式即可了。

要注意的是，Nestscape6.0之前版本不支持Iframe标记。

例子：

1:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

<iframe  src="页面"  width="宽度"  height="高度"  align="排列可以是left或right,center"  scrolling="是否有滚动条可以填no或yes"></iframe>  

<IFRAME  frameBorder=0  frameSpacing=0  height=25  marginHeight=0  marginWidth=0  scrolling=no  name=main  src="bgm/bgm.html"  width=300></IFRAME>

2:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

用了iframe后发现滚动条不漂亮想用2个图片来代替↑↓

应该怎么实现呢？

回答：

用下列代码替换网页的<title>..</title>  

<SCRIPT  LANGUAGE="javascript">

function  scroll(n)

{temp=n;

Out1.scrollTop=Out1.scrollTop+temp;

if  (temp==0)  return;

setTimeout("scroll(temp)",80);

}

</SCRIPT>

<TABLE  WIDTH="330">

<TR>  

<TD  WIDTH="304"  VALIGN="TOP"  ROWSPAN="2"  >  

<DIV  ID=Out1  STYLE="width:100%;  height:100;overflow:  hidden  ;border-style:dashed;border-width:  1px,1px,1px,1px;">  

文字<BR>  文字<BR>

文字<BR>  

文字<BR>

文字

<BR>

<BR>

</DIV>

</TD>

<TD  WIDTH="14"  VALIGN="TOP"><IMG  SRC="photo/up0605.gif"  WIDTH="14"  HEIGHT="20"  onmouseover="scroll(-1)"  onmouseout="scroll(0)"  onmousedown="scroll(-3)"  BORDER="0"  ALT="按下鼠标速度会更快！"></TD>

</TR>

<TR>

<TD  WIDTH="14"  VALIGN="BOTTOM"><IMG  SRC="photo/down0605.gif"  onmouseover="scroll(1)"  onmouseout="scroll(0)"  onmousedown="scroll(3)"  BORDER="0"  WIDTH="15"  HEIGHT="21"  ALT="按下鼠标速度会更快！"></TD>

</TR>

</TABLE>

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

下面这段代码可以实现IFrame自适应高度，即随着页面的长度，自动适应以免除页面和IFrame同时出现滚动条。源代码如下

<script  type="text/javascript">

//**  iframe自动适应页面  **//

//输入你希望根据页面高度自动调整高度的iframe的名称的列表

//用逗号把每个iframe的ID分隔.  例如:  ["myframe1",  "myframe2"]，可以只有一个窗体，则不用逗号。

//定义iframe的ID

var  iframeids=["test"]

//如果用户的浏览器不支持iframe是否将iframe隐藏  yes  表示隐藏，no表示不隐藏

var  iframehide="yes"

function  dyniframesize()  

{

var  dyniframe=new  Array()

for  (i=0;  i<iframeids.length;  i++)

{

if  (document.getElementById)

{

//自动调整iframe高度

dyniframe[dyniframe.length]  =  document.getElementById(iframeids);

if  (dyniframe  &&  !window.opera)

{

dyniframe.style.display="block"

if  (dyniframe.contentDocument  &&  dyniframe.contentDocument.body.offsetHeight)  //如果用户的浏览器是NetScape

dyniframe.height  =  dyniframe.contentDocument.body.offsetHeight;  

else  if  (dyniframe.Document  &&  dyniframe.Document.body.scrollHeight)  //如果用户的浏览器是IE

dyniframe.height  =  dyniframe.Document.body.scrollHeight;

}

}

//根据设定的参数来处理不支持iframe的浏览器的显示问题

if  ((document.all  ||  document.getElementById)  &&  iframehide=="no")

{

var  tempobj=document.all?  document.all[iframeids]  :  document.getElementById(iframeids)

tempobj.style.display="block"

}

}

}

if  (window.addEventListener)

window.addEventListener("load",  dyniframesize,  false)

else  if  (window.attachEvent)

window.attachEvent("onload",  dyniframesize)

else

window.onload=dyniframesize

</script>
  

 

 

 

 

 

 

 


iframe  的用法与注意事项

 

好多同志对  iframe  是如何控制的,并不是十分了解,基本上还处于一个模糊的认识状态.

注意两个事项,ifr  是一个以存在的  iframe  的  ID  和  NAME  值:
&#61548;        document.getElementById(“ifr”);
&#61548;        window.frames[“ifr”];

要想使用iframe内的函数,变量就必须通过第二种方法.因为它取的是一个完整的DOM模型(不知道这样说对不对).第一种方法只是取出了一个OBJECT而已.

如果只想改变iframe的  src  或者  border  ,  scrolling  等  attributes(与property不是一个概念,property是不能写在标签内的,比如:scrollHeight,innerHTML等),就需要用到第一种方法.

如果想取得iframe的页面(不是iframe本身),就需要使用第二种方法,因为它取得的是一个完整的DOM模型,比如想得到iframe的document.body的内容,就只能用第二种方法.

还要注意的是,如果在iframe的页面未完全装入的时候,调用iframe的DOM模型,会发生很严重的错误,所以,你要准备一个容错模式.

下面是示例,一个是aa.htm,一个是bb.htm,请先考到本地在运行,原因不用我在说了吧!

<!DOCTYPE  html  PUBLIC  "-//W3C//DTD  XHTML  1.0  Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html  xmlns="http://www.w3.org/1999/xhtml";  >
<head>
        <title>Untitled  Page</title>
<style  type="text/css">
<!--
body{
margin:0px;
}
-->
</style>
</head>
<body>
<iframe  id="ifr"  name="ifr"  width="100%"  height="500"  src="bb.htm"></iframe>
</body>
</html>
<script  language="javascript"  type="text/javascript">

var  aavalue="I'm  a  variant  in  Top  window!";

var  ifr_id=document.getElementById("ifr");
var  ifr_window=window.frames["ifr"];

alert("Alert  from  Top  window  :  Can't  get  iframe's  variant  by  ifr_id,  it  will  return  :"  +  ifr_id.bb_var);
alert("Alert  from  Top  window  :  Can't  get  iframe's  DOM  model  by  ifr_id  ,it  will  return  :"  +  ifr_id.window);
alert("Alert  from  Top  window  :  Get  src  from  id  :"  +  ifr_id.src);
alert("Alert  from  Top  window  :  Get  href  from  window:"  +  ifr_window.document.location.href);

//由于bb.htm可能还未装载完成,所以,下冇的可能引发错误  
//调用iframe内的函数  ifr_window.bb();

//调用iframe内的变量
alert("Alert  from  Top  window  :  "  +  ifr_window.bb_var);

//
alert("Alert  from  Top  Window  :"  +  ifr_window.document.body.innerHTML);


function  aa(msg){
        alert("I'm    alerting  from  Top  window  ,and  I  received  a  msg:\n"  +  msg);
}
</script>


bb.htm


<!DOCTYPE  html  PUBLIC  "-//W3C//DTD  XHTML  1.0  Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html  xmlns="http://www.w3.org/1999/xhtml";  >
<head>
        <title>sub  frame</title>
<style  type="text/css">
<!--
html,body{
margin:0px;
width:90%;
}
-->
</style>
</head>
<body>
        I'm  a  sub  frame!
        <br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...<br  />
        ...
</body>
</html>
<script  language="javascript"  type="text/javascript">

var  bb_var="I'm  a    variable  in  ifr";

function  bb(){
        alert("Alert  from  iframe  :I'm  frame  ifr's  function")
}

//获取父页面的变量
alert("Alert  from  iframe  parent.ifr_id::"  +  parent.ifr_id);
alert("Alert  from  iframe  parent.aa_value  :  "  +  parent.aa_value);

//通过父页面的ifr_id来改变  iframe的高度
alert("Alert  from  iframe  :  ifr's  clientHeight  :"  +document.body.clientHeight);
parent.ifr_id.height=document.body.clientHeight;

alert("Alert  from  iframe  :  ifr's  scrollHeight  :  "  +  document.body.scrollHeight);

//调用父窗体的函数:
parent.aa("I  will  calling  a  function  which  is  Top  window's  ");

//改变父窗体的标题:
alert("Alert  from  iframe  :  I  will  changing  Top  window's  title");
top.document.title="The  title  value  changed";

//通过父窗体的ifr_id来改变的border  与scrolling
alert("Alert  from  iframe  :  I  will  change  my  border  and  scrolling  :");
top.ifr_id.border=0;
top.ifr_id.scrolling="no";
</script>

分享到：
| 自定义标签
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    iframe跨域常用问题和iframe页面自适应

    在网页开发中，`iframe`...总结，理解和掌握`iframe`的跨域解决方案以及自适应策略，对于开发高效且用户体验良好的Web应用至关重要。在实际应用中，还需要注意安全性、性能优化等问题，以提供更优质的网页服务。

    iframe对另一个iframe控制的Demo

    总结来说，这个实例涉及了以下关键知识点： 1. HTML的`iframe`标签及其`src`属性。 2. JavaScript/jQuery对iframe内容的访问和操作。 3. 使用JavaScript改变DOM元素的样式，如隐藏和显示iframe。 4. JSP中嵌入...

    iframe里无右键菜单

    总结来说，禁用`iframe`内的右键菜单主要涉及`iframe`元素的选择和`contextmenu`事件的监听与处理。通过JavaScript的事件监听和事件处理函数，我们可以轻松实现这一功能，提供更安全、可控的用户体验。

    div被iframe遮住的几种情况及解决方法

    总结起来，解决DIV被IFRAME遮挡的方法有多种，从调整DIV的CSS样式，到调整IFRAME元素本身的属性，再到通过参数控制IFRAME的显示方式，都可以尝试。当然，在设计页面布局时，建议尽量避免复杂的层次结构，并且注意...

    iframe框架的多种刷新方法总结

    适合用于iframe框架集的几种页面刷新方法，局部刷新，动态刷新， window.location.herf的刷新方式

    js处理iframe的系列问题

    ### 总结 通过对上述知识点的学习，我们可以更加灵活地利用JavaScript来处理`iframe`中的各种问题，包括但不限于访问、修改`iframe`内部元素、提交表单、调用方法以及触发事件等。这些技巧对于开发复杂的Web应用来...

    iframe框架\JS获取iframe元素

    #### 六、总结 通过对`iframe`元素及其内部内容的操作，我们可以实现许多高级功能，如动态加载外部资源、构建复杂的用户界面等。然而，在实际应用中需要注意不同浏览器之间的兼容性差异，以及潜在的安全问题。通过...

    iframe中页面显示不全1

    总结一下，解决"Iframe中页面显示不全"的问题，需要关注以下几点： 1. 确保`&lt;iframe&gt;`的`width`和`height`属性设置正确，至少应与嵌入内容的尺寸相匹配。 2. 在`&lt;div&gt;`中嵌套`&lt;iframe&gt;`时，调整`&lt;div&gt;`的尺寸以容纳`...

    iframe自适应高度和宽度

    #### 六、总结 本文详细介绍了如何实现`iframe`的高度和宽度自适应，包括基本原理、示例代码以及解决兼容性问题的方法。通过这些技术，可以使`iframe`更加灵活地适应不同的内容变化，提高用户体验。在实际应用中，...

    iframe自适应高度js demo

    总结一下，实现`iframe`自适应高度的关键在于： 1. 使用JavaScript动态获取`iframe`内容的`scrollHeight`。 2. 在`iframe`的`onload`事件中调用更新高度的函数。 3. 跨域情况下，利用`postMessage`和`message`事件...

    iframe根据页面内容自适应高度和宽度

    总结来说，实现`iframe`根据页面内容自适应高度和宽度，可以通过CSS、JavaScript以及第三方库如`iframe-resizer`来完成。不同的方法适用于不同的场景，开发者可以根据实际需求选择合适的方式。在处理跨域问题时，第...

    JQUERY实现iframe页面切换功能

    总结，通过以上步骤，我们可以利用jQuery轻松实现iframe页面的切换功能。这种方法不仅可以提供灵活的内容展示，还可以优化页面性能，因为只需要加载用户当前关注的内容。在实际项目中，可以根据需要进行调整，例如...

    使用iframe在网页中嵌入其他网页的方法

    总结来说，`iframe`是一个强大的网页设计元素，它可以方便地将其他网页内容嵌入到当前页面中，通过调整其属性，可以实现定制化的展示效果。然而，在使用`iframe`时，也需要考虑到潜在的技术限制和用户体验因素。对于...

    完美解决iframe跨域问题

    总结，通过理解iframe跨域问题的本质以及各种解决方案，我们可以根据实际需求选择合适的策略。`window.name`跨域通信虽然存在一定的局限性，但在某些场景下能提供一种实用的跨域数据传递手段。在实际开发中，结合...

    JS去除iframe滚动条的方法

    为了更全面地理解去除iframe滚动条的方法，我们可以总结以下几点知识点： 1. iframe元素的作用与应用场景。 2. iframe的`scrolling`属性的三个可选值及其含义。 3. 如何通过JavaScript操作iframe的属性来去除滚动条...

    js 实现iframe 之间传值

    总结，JavaScript提供了多种在`iframe`之间传递值的方法，包括`postMessage()`、`window.name`、`location.hash`、Web存储API以及`window.parent`和`window.frames`。选择哪种方法取决于具体的需求，如是否跨域、...

    iframe弹出窗

    总结，"iframe弹出窗"是一种利用`iframe`和自定义`div`对话框来实现的交互方式，它提供了在主页面上无缝展示外部内容的功能。通过合理的CSS布局和JavaScript控制，我们可以创建出符合需求、用户体验良好的弹出窗口。

    动态创建iframe,并动态添加js执行代码

    总结来说，动态创建iframe并动态添加js执行代码是Web开发中的重要技术，它能够帮助我们实现异步加载、跨域通信等功能，但同时也需要注意相关的安全问题。通过熟练掌握这些技术，开发者能够构建更复杂、更灵活的Web...

    js下判断 iframe 是否加载完成的完美方法.docx

    总结 判断 iframe 是否加载完成是一个重要的步骤，在我们的开发中，我们可以使用以上三种方法来判断 iframe 是否加载完成。其中，方法一和方法二都是通用的方法，可以在多数浏览器中使用，而方法三则是 IE 浏览器...

    嵌入到HTML的iframe自动适应大小

    ### 总结与扩展 通过上述分析，我们可以看到“嵌入到HTML的iframe自动适应大小”这一知识点涉及到了HTML、CSS和JavaScript的综合运用，尤其是在处理不同浏览器的兼容性问题时显得尤为重要。在实际项目中，还需要...

Magicbox
Global site tag (gtag.js) - Google Analytics