精华内容
下载资源
问答
  • 关于Iframe框架如何指定网页位置嵌套的实例代码分享
    2021-06-12 16:57:04

    插入嵌入页的关键代码是

    vspace=-200

    >

    http://www.hao123.com是被嵌入的页面文件名,这个页可不能忘记上传,标签< Iframe >的作用相当于在网页的指定位置开了一个窗口,窗口的宽度就是“width"的值,窗口的高度就是“height"的值,一般情况下应与所在单元格的大小一致。标签< Iframe >还有一些可用的参数设置如下:

    marginwidth:网页中内容在表格右侧的预留宽度;例如:marginwidth="20",单位是pix,下同。

    marginheight:网页中内容在表格顶部预留的高度;

    hspace:网页右上角的的横坐标;

    vspace:网页右上角的纵坐标;

    frameborder:是否显示边缘,填“1"表示“是”,填“0"表示“否”,默认值是“1";

    scrolling:是否出现滚动条,填“1"表示“是”,填“0"表示“否”,默认值是“1";

    这个 vspace=-200就是关键的属性啦,

    用iframe调用网页的指定部分2010-10-25 22:38

    目前尚未找到按坐标来控制的办法,只有采用按顶、左、右边跑的方法来控制,因此要制作一个文件来完全调用目标网页内容,然后再在需要调用指定内容的地方使用iframe代码调用。

    首先建立一个完全调用目标网页的文件,命名为files.html,代码如下:

    无标题文档

    这个页面用iframe框架引用了目标页面,并且用CSS定位设定了框架浮动位置(top: -120px; left: -680px)。当然也可以按右边距控制,如right:680px,距离大小可以根据情况调整,直到调整到合适的位置。

    然后在需要调用目标内容的文件中合适的位置放入以下代码:

    高宽可以根据情况调整,为了使调用的内容正常、正确显示的我们设定的位置,大家可以修改files.html里的边距控制量以达到最佳效果

    更多相关内容
  • iframe marginwidth=”0″ marginheight=”0″ hspace=”0″ vspace=”0″ frameborder=”0″ id=”frametb” scrolling=”no” src=”frame.htm” onload=”style.width=this.contentWindow.document.all....
  • HTML iframe框架

    2017-03-25 16:48:00
    iframe 作用: 就是在一个网页插入一个小窗口 窗口里面也是一个网页 1 <a href="http://www.baidu.com" target="da1">百度网</a> 2 <a href="http://www.qq.com" target="da1">腾讯网</a...

    iframe

    作用:

    就是在一个网页插入一个小窗口   窗口里面也是一个网页

    1 <a href="http://www.baidu.com" target="da1">百度网</a>
    2     <a href="http://www.qq.com" target="da1">腾讯网</a>
    3     <a href="http://www.sina.com.cn" target="da1">新浪网</a>
    4      <a href="http://www.163.com" target="da1">网易网</a>
    5     <iframe name="da1" src="http://www.itnba.com" width="100%" height="500"></iframe>

    iframe  是一个小窗口   所以设计一个宽和高   默认路径是src 连接的路径   点击百度腾讯等  打开也在窗口的话  百度等的连接加上target="名称"和iframe的  name的一样

    锚点  

    快速定位一个位置

    定义

    <a herf=" #id名">标题名</a>

    <h3 id=" id名">标题名</h3>

    内容

    例如:

     1     <a href="#1">第一标题</a>
     2     <a href="#2">第二标题</a>
     3     <a href="#3">第三标题</a>
     4     <a href="#4">第四标题</a>
     5     <a href="#5">第五标题</a>
     6 
     7     <h3 id="1">第一标题</h3>
     8     1111111111111111<br />
     9     1111111111111111<br />
    10     1111111111111111<br />
    11     内容1<br />
    12     <h3 id="2">第二标题</h3>
    13     2222222222222222<br />
    14     2222222222222222<br />
    15     2222222222222222<br />
    16     2222222222222222<br />
    17     2222222222222222<br />
    18     2222222222222222<br />
    19     2222222222222222<br />
    20     内容2<br />
    21 
    22     <h3 id="3">第三标题</h3>
    23     3333333333333333333333333333333333<br />
    24     3333333333333333333333333333333333<br />
    25     3333333333333333333333333333333333<br />
    26     3333333333333333333333333333333333<br />
    27     内容3
    28     <h3 id="4">第四标题</h3>
    29     4444444444444444444444444444444444<br />
    30     4444444444444444444444444444444444<br />
    31     4444444444444444444444444444444444<br />
    32     4444444444444444444444444444444444<br />
    33     内容4
    34 
    35     <h3 id="5">第五标题</h3>
    36     4444444444444444444444444444444444<br />
    37     4444444444444444444444444444444444<br />
    38     4444444444444444444444444444444444<br />
    39     内容5
    View Code

    插入视频:
    在优酷等视频网站,找到分享位置,复制html代码,贴入网页中

    插入音乐

    <embed src="音乐路径" hidden="true" autostart="true" loop="true">

    hidden意思是是否隐藏    autistart意思是是否自动播放  loop 意思是是否循环播放


    简单的滚动效果:
    <marquee direction="right" behavior="alternate" scrollamount="50">啦啦啦啦啦</marquee>

        接下来我来细说该标签的属性。
    1.滚动方向属性 direction
    该属性的滚动方向可以设置四个值:up(文字向上)、down(文字向下)、left(文字向左)、right(文字向右)。
    2.滚动方式属性 behavior
    该属性的取值有三个值:scroll(循环滚动,默认效果)、slide(只滚动一次就停止)、alternate(来回交替进行滚动)
    3.滚动速度属性 scrollamount
    该属性能调整文字滚动的速度,滚动文字的速度实际上是通过设置滚动文字每次移动的长度来实现的,以像素为单位。值只写数字,不带px单位,若带了单位则设置无效。
    4.滚动延迟属性 scrolldelay
    该属性用来设置滚动文字滚动的时间间隔(滚动两步之间的时间间隔)。
    scrolldelay的时间间隔单位是毫秒,取值只写数字
    5.滚动循环属性 loop
    设置滚动文字后,默认会无限循环下去,若想控制循环的次数,可设置此属性。
    6.滚动范围属性 width&height
    若想控制文字滚动的范围,则可起用这二属性,以像素为单位,不写px单位。默认情况下left和right滚动的width和浏览器窗口同宽,搞定和文字高度同高。up和down时height为浏览器窗口高度的三分之一。
    7.滚动背景颜色属性 bgcolor
    此属性为滚动区域设置背景色(取值为十六进制颜色码和英文)。
    8.滚动空间属性 hspace&vspace
    hsapce属性可以设置滚动范围的水平位置,vspace用来设置滚动范围的垂直位置。单位均为像素,写值时不写单位px。

     

    转载于:https://www.cnblogs.com/zhangwei99com/p/6617568.html

    展开全文
  • Iframe用法精析用于设置文本或图形的浮动图文框或容器。BORDER设定围绕图文框的边缘宽度FRAMEBODER设置边框是不否为3维(0=否,1=是)HEIGHT,WIDTH设质边框的宽度和高度SCROLLING是否有滚动条(YES,NO,AUTO)SRC指定...

    Iframe用法精析

    用于设置文本或图形的浮动图文框或容器。

    BORDER

    设定围绕图文框的边缘宽度

    FRAMEBODER

    设置边框是不否为3维(0=否,1=是)

    HEIGHT,WIDTH

    设质边框的宽度和高度

    SCROLLING

    是否有滚动条(YES,NO,AUTO)

    SRC

    指定IFRAME调用的文件或图片(HTML,HTM,GIF,JPEG,JPG,PNG,TXT,*.*)

    “画中画”效果--谈IFRAME标签的使用

    纵观时下网站,本来网速就有些慢,可是几乎每页都要放什么Banner,栏目图片,版权等一大堆雷同的东西,当然,出于网站风格统一、广告效应的需要,本无可厚非,可毕竟让用户的钱包为这些“点缀“的东西”日益消得钱憔悴”了,有没有办法,让这些雷同的东西一次下载后就不用再下载,而只下载那些内容有变化区域的网页内容呢?

    答案很肯定:应用Iframe标记!

    一、Iframe标记的使用

    提起Iframe,可能你早已将之扔到“被遗忘的角落”了,不过,说起其兄弟Frame就不会陌生了。Frame标记即帧标记,我们所说的多帧结构就是在一个浏览器窗口中显示多个HTML文件。现在,我们遇到一种很现实的情况:如有一个教程,是一节一节地上,每页末尾做一个“上一节“、“下一节“的链接,除了每节教程内容不同之外,页面其它部分内容都是相同的,如果一页一页地做笨页面,这似乎太让人厌烦了,这时突发奇想,如果有一种方法让页面其它地方不变,只将教程做成一页一页的内容页,不含其它内容,在点击上下翻页链接时,只改变教程内容部分,其它保持不变,这样,一是省时,另则以后如教程有个三长两短的变动,也很方便,不致于牵一发而动全军了;更重要的是将那些广告Banner、栏目列表、导航等几乎每页的都有的东西只下载一次后就不再下载了。 Iframe标记,又叫浮动帧标记,你可以用它将一个HTML文档嵌入在一个HTML中显示。它不同于Frame标记最大的特征即这个标记所引用的 HTML文件不是与另外的HTML文件相互独立显示,而是可以直接嵌入在一个HTML文件中,与这个HTML文件内容相互融合,成为一个整体,另外,还可以多次在一个页面内显示同一内容,而不必重复写内容,一个形象的比喻即“画中画“电视。

    现在我们谈一下Iframe标记的使用。

    Iframe标记的使用格式是:

    复制代码代码如下:

    src:文件的路径,既可是HTML文件,也可以是文本、ASP等;

    width、height:"画中画"区域的宽与高;

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

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

    比如:

    复制代码代码如下:

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

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

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

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

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

    复制代码代码如下:

    test.htm文件代码为:

    hello,my boy

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

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

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

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

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

    如example.htm:

    复制代码代码如下:

    hello,my wife

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

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

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

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

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

    有一点要注意,Nestscape浏览器不支持Iframe标记,但在时下IE的天下,这似乎也无大碍,广泛采用Iframe标记,既为自己(网站)着了想,又为网友节省了网费,何乐而不为?

    例子

    复制代码代码如下:

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

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

    应该怎么实现呢?

    回答:

    用下列代码替换网页的

    复制代码代码如下:

    ..

    function scroll(n)

    {temp=n;

    Out1.scrollTop=Out1.scrollTop+temp;

    if (temp==0) return;

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

    }

    文字

    文字

    文字

    文字

    文字

    按下鼠标速度会更快!
    按下鼠标速度会更快!

    内框架Iframe的使用

    使用Iframe可以在一人表格内调用一个外部文件,是非常有用的。本网站在很多页面上都使用了iframe效果。

    现在我们学一下Iframe标记的使用。

    Iframe标记的使用格式是:

    复制代码代码如下:

    src:文件的路径,既可是HTML文件,也可以是文本、ASP等;

    width、height:"内部框架"区域的宽与高;

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

    FrameBorder:区域边框的宽度,为了让“内部框架“与邻近的内容相融合,常设置为0。

    name:框架的名字,用来进行识别。

    比如:

    当你想用父框架控制内部框架时,可以使用: target="框架的名字"来控制。

    IFrame也可以编辑文字

    有没有想过除了表单(

    )之外还有其它的网页元素可以编辑文字呢?只要使用IFrame的隐藏的一个属性就可以使IFrame成为一个文本编辑器。

    其中designMode属性表示IFrame的设计模式的状态(开/关),还在犹豫什么呢,快试试吧!

    只要巧妙的利用这一特性就可以制作很多意想不到的效果。如果下面我们来做一个图片编辑器。

    下面使更多的补充:

    是框架的一种形式,也比较常用到。

    例子1。

    不用多说了。

    width插入页的宽;height插入页的高;scrolling 是否显示页面滚动条(可选的参数为 auto、yes、no,如果省略这个参数,则默认为auto);frameborder 边框大小;

    注意:URL建议用绝对路径

    传说中百DU用:

    黑了88*8。。。

    例子2。

    如果一个页面里面有框架。。随便点页面里的连接,要求在这个 里打开。在iframe 中加入name=** (**自己设定)

    然后在修改默认打开模式,:网页HEAD中加上或部分连接的目标框架设为(**)

    例子3。

    要插入一个页面。要求只拿中间一部分。其他的都不要。,。。

    代码:

    控制插入页被框架覆盖的深度 marginwidth=0 marginheight=0;控制框架覆盖上部分的深度 vspace=-170

    scrolling滚动条要否(auto、yes、no) frameborder框架的边框大小,width=776 height=2500此框架的大小。

    一、页面内加入iframe

    scrolling表示是否显示页面滚动条,可选的参数为auto、yes、no,如果省略这个参数,则默认为auto。

    二、超链接指向这个嵌入的网页,只要给这个iframe命名就可以了。方法是,例如我命名为aa,写入这句HTML语言,然后,网页上的超链接语句应该写为:

    三、如果把frameborder设为1,效果就像文本框一样

    透明的IFRAME的用法

    必需IE5.5以上版本才支持

    在transparentBody.htm文件的

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

    重点1:利用javascript指定iframe的src并重新加载该iframe(见本文最下面我的项目)

    难点1:设置iframe的背景色

    a.htm

    function setBG(){

    var strColor=document.bgColor;

    frm.document.bgColor=strColor;

    }

    难点2:

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

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

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

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

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

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

    test.htm文件代码为:

    hello,my boy

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

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

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

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

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

    如example.htm:

    hello,my wife

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

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

    或者parent.document.getElementById("myH2").innerText="hello,my friend"

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

    3:frame的一个子元素访问frame的另一个子元素

    例如:框架文件frame.html中嵌入了另外两个html文件

    那么现在要在DirectoryTree.html文件中访问Search.html文件中的一个id为section的标签的innerHTML属性,则可以这样:

    alert(parent.document.search.section.innerHTML),

    其中search是“搜索”div的id,或者:

    alert(parent.document.getElementById("search").section.innerHTML),

    或者也可以这样:

    alert(parent.document.frames["frameSublist"].name)(这是直接访问iframe)

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

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

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

    例子:

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

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

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

    应该怎么实现呢?

    回答:

    用下列代码替换网页的

    ..

    function scroll(n)

    {temp=n;

    Out1.scrollTop=Out1.scrollTop+temp;

    if (temp==0) return;

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

    }

    文字
    文字

    文字

    文字

    文字

    按下鼠标速度会更快!
    按下鼠标速度会更快!

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

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

    源代码如下

    //** 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

    {

    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.οnlοad=dyniframesize

    HTML 标签

    定义和用法

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

    HTML 与 XHTML 之间的差异

    NONE

    可选的属性

    DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.

    属性 值 描述 DTD

    align left

    right

    top

    middle

    bottom

    规定如何根据周围的文本来排列此框架。 TF

    frameborder 1

    0

    规定是否显示框架的边框。 TF

    height pixels

    %

    定义 iframe 的高度。 TF

    longdesc URL 描述此框架内容的长描述的URL。 TF

    marginheight pixels 定义 iframe 的顶部和底部的边距。 TF

    marginwidth pixels 定义 iframe 的左侧和右侧的边距。 TF

    name frame_name 规定 iframe 的唯一名称 (以便在脚本中使用)。 TF

    scrolling yes

    no

    auto

    定义滚动条。 TF

    src URL 在 iframe 中显示文档的 URL。 TF

    width pixels

    %

    定义 iframe 的宽度。 TF

    以下是本人自己在实际项目开发时利用frame写的一段源代码,仅供参考:

    主文件(框架):

    教育局资源管理系统

    function setBgColor()

    {

    var bg=document.bgColor

    bottom.document.bgColor=bg

    }

    被引用的文件UserLogin.html:

     会员登录

    用户名:
    密码:

    现在假设“最新主题列表”文件中有一个超链接,点击其,包含“最新主题列表”的iframe就重新加载,此时需要利用javascript来实现:

    www.baidu.com

    function redirect()

    {

    parent.document.frames["frameSublist"].location.href="www.baidu.com"

    }

    展开全文
  • 完全搞定iframe框架)里的滚动条!(一) 说明:1、本文参考了网络上大量资料,本人在此深表感谢!2、本文假设读者,有一定的HTML、CSS、JS基础。3、本文讨论的目标是,通过A页面里
    原文地址为: 完全搞定iframe(框架)里的滚动条!(一)

     完全搞定iframe(框架)里的滚动条!(一)

    说明:
    1、本文参考了网络上大量资料,本人在此深表感谢!
    2、本文假设读者,有一定的HTML、CSS、JS基础。
    3、本文讨论的目标是,通过A页面里的<iframe>标记引用B网页之后,在A页面上出现滚动条这种情况的几种解决办法。
    4、因为篇幅的关系,文章被分成了两部分。通常情况下,(一)就能解决你的问题,(二)将会深入探讨这个问题和相关的解决方案。
    5、如果你觉得我啰嗦,请直接从方案一开始读起。
    6、文档的附件里有各种解决方案的示例代码供大家下载,我尽量把每一种方案都放在一个独立的文件夹里面。(这是一个asp的case,里面可能会包含一些asp方面的代码。)
    7、解决问题的方法有两种:CSS和JS,本人倾向于使用JS这种方法。
    8、实际上遇到这种问题的时候,有两种情况:i)在A页面上iframe的大小固定,不允许延展(拉宽或拉长),但是B页面的内容比iframe长(也有宽的时候,本人实际工作中遇到长的时候比较多,本文也只讨论长的情况,宽的情况以此类推,把相应的height换成width就行了。ii)A页面上可以不限制iframe的长度,B页面的长度超过iframe的长度,B页面可能延展iframe的长度,通常B页面也会把A页面的长度自动给延展了。
    i)这种情况通常是用在网站首页、栏目首页这些地方,出现的次数比较多。
    ii)这种情况出现的比较少,我在使用网易邮箱“记事本”时发现网易邮箱的这种情况,研究之后用在了一个在线销售网站的产品评论上了(http://www.pplily.com/product_view.asp?id=1380)。评论的列表,放在<iframe>里面,根据一评论的多少,<iframe>的长度会跟着发生变化,整个网页的长度也要变化。
    9、示例代码下载:
    http://www.jqs0086.com/ncp/images/完全搞定iframe的滚动条!.rar


    我今天遇到的情况是,i)和ii)这两种情况全都“赶上了”。研究了好一会,总算把相关的问题都解决了,现在总结一下。

    现在我说明一下面的将要使用的三个文件:
    1、A文件,网站首页,中间有一个width:450和heidth:260的<iframe>。 iframe的ID是SellMoney  指向的文件就是B。
    A文件部分代码:

    < iframe  src ="B"  width ="450"  height ="260"  scrolling =""  frameborder ="0"  hspace ="0"  vspace ="0"  id ="SellMoney"  allowTransparency ="true" ></ iframe >

    2、B文件,一个数据列表,数据大约50行,每页30行,分为两页,宽度自动,高度(30行数据的实际高度)800px左右。
    B文件部分代码:

    <! 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 >
    < meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
    < TITLE > ::::: 鼎天网游 :::::-收货列表 </ TITLE >

    < STYLE  type =text/css > ...
    BODY 
    {...}{
        FONT-SIZE
    : 12px;
        
    /**//*width: 430px;*/
        margin
    :0px;
        padding
    :0px;
    }
    HTML,BODY
    {...}{
    /**//*    overflow-x:hidden;
    */
    }
    TD 
    {...}{
        FONT-SIZE
    : 12px;
    }
    TH 
    {...}{
        FONT-SIZE
    : 12px;
    }
    </ STYLE >

    </ HEAD >
    < BODY  bgColor ="transparent" >
    < TABLE  width ="100%"  border ="0"  align ="center"  cellPadding ="0"  cellSpacing ="1"  id ="listtable"  valign ="top"    >  
      
    < TR >
        
    < TD >
        
    <!--  这个地方是数据列表程序。  -->
        
    </ TD >
      
    </ TR >

    </ TABLE >
    < TABLE  width ="90%"  border ="0"  align ="center"  cellpadding ="0"  cellspacing ="0" >
      
    < TR >
        
    < TD >
        
    <!--  这个地方是分页程序。  -->
        
    </ TD >
      
    </ TR >
    </ TABLE >
    </ BODY >
    </ HTML >
    < script  language ="JavaScript"  type ="text/javascript" > ...

    function expandWindow()...{
    //        try{
    //
                var SellMoney=top.window.document.getElementById("SellMoney");
    //
                var pageWidth = (document.body.clientWidth?document.body.clientWidth:document.documentElement.clientWidth);
    //
                //SellMoney.style.height= pageWidth+0;
    //
                alert(pageWidth);
    //
                pageWidth = SellMoney.style.width-20;
    //
            }catch(e){
    //
                alert(e);
    //
            }
        try...{
            
    var SellGold=top.window.document.getElementById("SellGold");
            
    var pageHeight = (document.body.clientHeight?document.body.clientHeight:document.documentElement.clientHeight);
            SellGold.style.height
    = pageHeight+0;
            
    //alert(pageHeight);
        }catch(e)...{
            
    //alert(e);
            window.status="不能展开。";
            
    try...{
                
    var SellMoney=top.window.document.getElementById("SellMoney");
                
    var pageHeight = (document.body.clientHeight?document.body.clientHeight:document.documentElement.clientHeight);
                
    //var pageWidth = (document.body.clientWidth?document.body.clientWidth:document.documentElement.clientWidth);
                var pageWidth = 400;
                
    if(document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight))
                
    ...{
                    
    //document.documentElement.clientWidth = pageWidth;
                    //这个属性是只读的。
                    //alert(document.documentElement.clientWidth);
                    pageWidth = document.documentElement.clientWidth;
                }

                
    else if(document.body&&(document.body.clientWidth||document.body.clientHeight))
                
    ...{
                    
    //document.body.clientWidth = pageWidth;
                    pageWidth = document.documentElement.clientWidth;
                }
        
                
    if(document.body)...{
                    document.body.style.width
    =pageWidth;
                }

    /**//*
    太不容易了,终于调过了!
    目标是为了引用页不出现滚动条!
    首先,不使用”!DOCTYPE “文档声明的话很容易就过去了。但是不使用文档声明,一是代码不规范,二是不能获得文档的高度。
    然后,是在css里定义body的width。但是这样就是固定了,也不太合适。
    再后,就是在Css里定义html和body的 overflow-x,这样的话,页面会被滚动条挡上一部分。

    同时我也在尝试用js来解决问题。
    开始的时候想给document.documentElement.clientWidth 付值但是没有成功。这个属性是只读的。
    其后查看“苏州小雨”的《DHTML手册》,验证了上面的猜测。
    最后,查看以前编写的其它代码,发现document.body.style.width这个是读/写属性的,尝试用document.body.style.width来付值,结果终于成功了。

    */
                
    //SellMoney.style.height= 450;
                //alert(pageHeight);
            }catch(e)...{
                
    //alert(e);
                window.status+=e;
            }

        }

    }


    window.onload
    =expandWindow;
    </ script >

    3、C文件,中间中间有一个width:450和heidth:无限的<iframe>。 iframe的ID是SellGold指向的文件也是B。
    【注意 A文件iframe的ID是SellMoney  ,C文件是SellGold,】
    C文件的作用就是把B“包”起来,给B加上导航、登录框什么的。实际上也可以把B文件的代码直接加到C里面,但我现在A文件和C文件都通过iframe引用B,这样的话,就能偷懒了,而且美其名曰:“代码重用”。*_^
    C文件就是为了说明 ii )情况准备的,没有后台编程经验的朋友,可以不关注C文件和ii)这种情况。我也打算把ii)这种情况放到另一篇文章当中进行讨论。
    C文件部分代码:

    < iframe src ="B ?<%= Request.ServerVariableS( " QUERY_STRING " ) %> "  width = " 450 "  frameborder = " 0 "  hspace = " 0 "  vspace = " 0 "  id = " SellGold "  allowTransparency = " true " ></ iframe >




    解决方案一:

     

    去掉文件开头的文档声明。
    不使用"DOCTYPE "文档声明(详细代码在下面)的话很容易就过去了。但是不使用文档声明,一是代码不规范,二是不能获得文档的高度。 下面的代码执行的结果是pageHeight=160px;,而实际上B文件的高度(长度)是800px左右。

    var  pageHeight  =  (document.body.clientHeight ? document.body.clientHeight:document.documentElement.clientHeight);


    --------

    有关的文档声明:

    <! 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" >


    ---------------

    解决方案二
    在B文档的css里定义body的width<437。但是这样就是固定了,也不太合适。只能用在一个文件里,在另一个文件的iframe 可能宽达500、600,但是B文件却被挤压到450,页面的一边或者两条出现大块的空白。

    BODY  {...} {
        FONT-SIZE
    : 12px;
        width
    : 430px;/**//*就是这里了!*/
        margin
    :0px;
        padding
    :0px;
    }

    解决方案三:
    在B文件的CSS中使用overflow。
    使用overflow需要注意以下问题:
    1、使用overflow之前看看网页的开头没有没使用文档声明,如果使用了文档声明,那么必须同时定义HTML和BODY两个标记。
    2、overflow-x和overflow-y分别定义横向的滚动条和纵向的滚动条,但是它们是IE专有属性,只有在IE(4.0)以上的版本才能使用。
    3、overflow-x: hidden;使用之后,有可能会被纵向的滚动条挡住右边一部分内容。

    HTML,BODY {...} {
        overflow-x
    :hidden;
    }
    解决方案四:
    使用js代码自动调整B文件的宽度,B文件宽度减小之后,横向的滚动条自然就消失了。
    注意:
    1、 代码里有两段函数都叫expandWindow,你实际上只需要选择其中一个就行了。这只是同一函数的不同版本,上面的版本,我详细说明了每行代码的作用,下面的版本,我简化了一下,显得干净一些。
    2、这段代码,是独立运行的,与A、C文件无关与A文件里的iframe的ID是什么也无关。这样的话,就与上面的“B文件部分代码”不完全一样了。 “B文件部分代码”需要兼顾A、C两种情况,所以它的代码很复杂。
    3、 通常情况下,只需要下面这段代码就能解决问题了。推荐您使用下面的代码!

    把下面的代码放到B文件(或者其它需要只显示纵向滚动条的网页)里,A网页打开之后,调用B网页,B页面打开之后,自动执行代码,横向滚动条自动消失。
    < script  language ="JavaScript"  type ="text/javascript" > ...
    //这是一个带说明的版本,后面还有一个非常干净的版本。
    function expandWindow()...{//这个函数能调整本页面的宽度
            try...{//使用try{}catch(d){}来捕捉错误,我不喜欢状态栏上那个黄色的惊叹号。
                var pageWidth = 400;//我们将要把网页的宽度改成pageWidth大小。为了防止意外,我暂时将宽度设置为一个比较小的数。
                if(document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight))
                
    ...{//看看能不能取得document.documentElement.clientWidth的大小。
                    //document.documentElement.clientWidth = pageWidth;
                    //我曾经想过直接修改这个属性,可惜这个属性是只读的,不能斌值。
                    //alert(document.documentElement.clientWidth);
                    pageWidth = document.documentElement.clientWidth;
                }

                
    else if(document.body&&(document.body.clientWidth||document.body.clientHeight))
                
    ...{//尝试获得document.body.clientWidth。
                    //document.body.clientWidth = pageWidth;,这条也不行,同样是只读的。
                    pageWidth = document.documentElement.clientWidth;
                }
        
                
    if(document.body)...{
                
    //尝试取得document.body,看看它是不是一个对象。如果它是一个对象object,那么就可以使用.width了。
                    if(document.body.style.width<pageWidth)...{//这时再检查一下,是我为了写这篇文章临时添加的。
                        document.body.style.width=pageWidth;//这个width是个读写的属性,修改它,网页的宽度就变了。
                    }
                }

                
    //alert(pageHeight);//调试程序用的,看看究竟页面被改成多大。
            }catch(e)...{//捕捉错误
                window.status+=e;//把错误显示在状态栏里
            }
    }

    //下面是一个简洁、干净的版本。
    function expandWindow()...{
        
    var pageWidth = 400;
        
    if(document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight))
        
    ...{
            pageWidth 
    = document.documentElement.clientWidth;
        }

        
    else if(document.body&&(document.body.clientWidth||document.body.clientHeight))
        
    ...{
            pageWidth 
    = document.documentElement.clientWidth;
        }
        
        
    if(document.body)...{
            document.body.style.width
    =pageWidth;
        }

    }

    window.onload
    =expandWindow;//当页面全部打开之后执行函数。
    </ script >

     


    转载请注明本文地址: 完全搞定iframe(框架)里的滚动条!(一)
    展开全文
  • 我的基础代码是判断来路跳转的代码,需要加入iframe框架的代码,尝试多次均以失败告终,最多只能做到固定高度,无法自适应,这是自适应高度代码解决办法:https://blog.csdn.net/hj7jay/article/details/51675692 ...
  • iframe布局 详细用法 及缺点

    万次阅读 2014-03-18 10:43:27
    frame与Iframe的各项属性  frame例子:      Sorry,your explorer doesn't support the frame...                Iframe标记,又叫浮动帧标记,你可以用它将一个HTML文件嵌入在另一个...
  • iframe框架

    2016-04-28 19:52:39
    经常和网站打交道或者经常建站的朋友对iframe肯定不陌生,网站有了iframe会变得更加美观、大气。对于初涉互联网的新手来说,iframe并不熟悉,...iframe标签是框架的一种形式,也比较常用到,iframe一般用来包含别的页
  • IFrame 框架的用法简介

    2014-12-03 12:41:00
    框架的一种形式,也比较常用到。  例子1。 <iframewidth=420height=330frameborder=0scrolling=autosrc=URL></iframe> 不用多说了。  width插入页的宽;height插入页的高;scrolling是否显示...
  • iframe页面(head.jsp)body标签中加入:style=background:transparent home.jsp调用iframe页面iframe标签中加入:allowTransparency="true"如: head.jsp &lt;html&gt; &lt;body style=&...
  • 框架Iframe指定网页位置嵌套代码

    千次阅读 2012-10-12 16:35:11
    vspace=-200>  http://www.hao123.com是被嵌入的页面文件名,这个页可不能忘记上传,标签的作用相当于在网页的指定位置开了一个窗口,窗口的宽度就是“width"的值,窗口的高度就是“height"的值,一般情况下应与...
  • iframe参数详解

    千次阅读 2016-07-05 13:22:42
    iframe参数详解 iframe runat="server" src="you page's url" width="750" height="30" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency=...
  • 相信刚学习javaweb的同学都十分好奇页面上点击一个按钮下面就显示一个页面,点击不同的导航栏...iframe class="J_iframe" name="iframe0" width="100%" height="100%" src="${pageContext.request.contextPath}/
  • Web前端之iframe详解

    万次阅读 多人点赞 2019-08-13 12:12:15
    在实现前端页面的时候遇到很多问题,开发进度很慢,实现一个功能基本上都是在走弯路,也不知道如何实现才是最好的选择,所以就一直在爬坑,在实现一个页面数据编辑的功能的时候就需要使用一个iframe内联框架,但是...
  • 完全搞定iframe框架)里的滚动条

    千次阅读 2016-08-10 23:37:27
    iframe初始滚动条位置: <iframe id="aa" name="aa" src=" http://news.163.com"></iframe> document.getElementById("aa").document.body.scrollTop = "500"; 滚动条始终在最下端: window.onload=function (){ doc
  • iframe常见问题详解

    2019-07-26 15:09:16
    vspace = "0" hspace = "0" allowtransparency = "true" scrolling = "no" allowfullscreen = "true" > < / iframe > var iwindow = iframe . contentWindow ; var idoc = iwindow . document ; ...
  • iframe嵌套其它网站页面详解

    万次阅读 多人点赞 2019-07-19 11:32:17
    iframe基本内涵 通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了。 <iframe src="demo_iframe_sandbox.htm"></iframe> 但是,有追求的我们,并不是想要这么low的iframe. 我们来看看...
  • 关于iframe框架

    2007-12-14 11:02:00
    Iframe标记,又叫浮动帧标记,你可以用它将一个HTML文件嵌入在另一个HTML中显示。它不同于Frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件相互独立显示,而是可以直接嵌入在一个HTML文件中,与...
  • HTML中的Frame与Iframe框架属性

    千次阅读 2010-05-06 17:51:00
    Frame框架现已不怎么常用,给个例子以展示其属性。 frame例子: Sorry,your explorer doesn't support the frame... Iframe 标记,又叫浮动帧标记,你可以用它将一个HTML文件嵌入在另一个...
  • iframe 标签属性解读

    千次阅读 2019-01-08 14:03:00
    iframe 元素会创建包含另外一个文档的内联框架(即行内框架) 转载于:https://www.cnblogs.com/qiaduan/p/10238655.html
  • iframe详解

    2018-06-21 16:00:09
    原文出处:前端之iframe详解iframe基本内涵通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了。&lt;iframe src="demo_iframe_sandbox.htm"&gt;&lt;/iframe&gt;但是,有追求...
  • iframe>--> <iframe ng-src="{{ctrl.vueUrl}}" hspace="0" vspace="0" scrolling="yes" height="100%" width="100%" id="main" name="main" frameborder="0" class="iframe-container"></iframe> </div> iframe集成...
  • iframe框架的用法

    2011-04-25 09:56:37
    Iframe框架;Iframe &lt;iframe&gt;是框架的一种形式,也比较常用到。 例子1。 &lt;iframe width=420 height=330 frameborder=0 scrolling=auto src=URL&gt;&lt;/iframe&gt; ...
  • 一、iframe基本概念 通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了。 <iframe src="www.baidu.com"></iframe> 但是,有追求的我们,并不是想要这么low的iframe. 我们来看看在...
  • iframe去边框,无边框 iframe runat="server" src="you page's url" width="750" height="30" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes">iframe> ...

空空如也

空空如也

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

iframe框架 vspace

友情链接: show_xdc .zip