`
qinya06
  • 浏览: 593468 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

HTML <iframe>

阅读更多
1、HTML <iframe> 标签:

定义和用法

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

对于在iframe标签中定义的js函数,如果在这个函数中,想访问包含iframe标签的页面上的名为killUpdate(xx)的js函数,则需要使用 window.parent.killUpdate('');语句来调用。

例子:

<html>

<body>

<iframe src="/i/eg_landscape.jpg"></iframe>

<p>一些老的浏览器不支持 iframe。</p>
<p>如果得不到支持,iframe 是不可见的。</p>


</body>
</html>


2 、HTML <form> 标签的 target 属性

定义和用法
target 属性规定在何处打开 action URL。

语法
<form target="value">
属性值
值 描述
_blank 在新窗口中打开。
_self 默认。在相同的框架中打开。
_parent 在父框架集中打开。
_top 在整个窗口中打开。
framename 在指定的框架中打开。这儿可以使用iframe来定义框架名。


例子:在当前页面不刷新的情况下,使用iframe来上传文件(其实变化都是在iframe完成的)。

<script type="text/javascript">

function uploadPlanImg(){
   if($('orginalPlanImg').value != ""){
    startStatusCheck();
    return true;   //提交form,在iframe中执行。
   }
 
   return false;
}

//上传完毕后,取消周期性获取进度状态,将最终的状态显示在客户端
function killUpdate(message)
{
alert("wangle");
    $('submitButton').disabled = false;
    if(null!=updater)
    {
    //停止刷新获取进度
    updater.stop();

    }
    if(message != '')//如果有错误信息,则显示出来
    {
      $('status').innerHTML = '<div class="error"><b>Error processing results: ' + message + '</b></div>';
    }
    else//如果没有错误信息
    {
      //获取上传文件的完成状态,显示到客户端
      new Ajax.Updater('status',
                     '/meeting/fileupload',
                     {asynchronous:true, method: 'get', parameters: 'c=status', onFailure: reportError});
    }

</script>

<iframe id='target_upload' name='target_upload' src=''></iframe>

<form enctype="multipart/form-data" name="fileform" method="post" action="/meeting/fileupload"
            onsubmit="return uploadPlanImg();" target="target_upload">
     <input type="file" name="meetingRoomVO.planImg" id="orginalPlanImg" size="19" />
     <input id="submitButton" type="submit" value="点击上传" />
          
   <div id="files"><div>
</form>

以上的form会提交给一个Servlet,在Servlet的返回值中,想调用当前页面的killUpdate方法。以下是Servlet一部分语句:

private void sendCompleteResponse(HttpServletResponse response,
String message) throws IOException {
if (message == null) {
response
    .getOutputStream()
    .print(
      "<html><head><script type='text/javascript'>function killUpdate() { window.parent.killUpdate(''); }</script></head><body onload='killUpdate()'>abc</body></html>");
} else {
response
    .getOutputStream()
    .print(
      "<html><head><script type='text/javascript'>function killUpdate() { window.parent.killUpdate('"
        + message
        + "'); }</script></head><body onload='killUpdate()'></body></html>");
}
}
分享到:
评论

相关推荐

    html 网页加载

    在探讨HTML网页加载中的`&lt;iframe&gt;`元素时,我们首先需要理解`&lt;iframe&gt;`的基本概念、属性及其在网页设计中的作用。本篇文章将围绕提供的代码片段`&lt;iframe src="show.asp" frameBorder="0" width="500" scrolling="no...

    object标签遮罩问题

    具体做法是创建一个 `&lt;iframe&gt;` 元素,并将其设置为覆盖 `&lt;object&gt;` 标签,然后再在这个 `&lt;iframe&gt;` 内部放置 `&lt;div&gt;` 元素。这种方法可以有效地避免 `&lt;object&gt;` 标签覆盖 `&lt;div&gt;` 的问题。 以下是一个具体的实现...

    Html 标签embed 动态显示

    总之,`&lt;embed&gt;`和`&lt;iframe&gt;`是HTML中实现动态内容显示的重要工具,它们极大地扩展了网页的可能性,让开发者能够创建出更加生动、多样的网络环境。正确理解和运用这些标签,是每一个前端开发者必备的技能。

    javascript页面代码防止frame禁止右键

    &lt;td&gt;无法右键&lt;/td&gt; &lt;/table&gt; ``` #### 2. 禁止选中文本 为了让用户无法选中页面上的文本,可以使用`onselectstart`事件。例如: ```html &lt;body onselectstart="return false;"&gt; ``` #### 3. 禁止粘贴、复制和...

    网页Object标签遮盖DIV标签解决方法

    如果`&lt;Object&gt;`标签用于嵌入的是网页内容,可以考虑使用`&lt;iframe&gt;`标签,它通常有更好的兼容性和更少的布局问题。 6. **JavaScript解决方案**: 如果以上方法都不能解决问题,可以考虑使用JavaScript来检测`...

    iframe自适应宽高

    这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...

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

    &lt;iframe src="目标URL" width="宽度" height="高度" frameborder="边框" marginwidth="外边距宽度" marginheight="外边距高度" scrolling="滚动条" allowtransparency="透明度"&gt;&lt;/iframe&gt; ``` 1. `src` 属性:这是`...

    html知识

    `&lt;iframe&gt;` 标签用于嵌入另一个HTML文档到当前文档中指定位置,常用于广告、小部件或子页面的嵌入。 **属性详解:** - **src**: 指定嵌入页面的URL。 - **width**: 嵌入框架的宽度。 - **height**: 嵌入框架的高度...

    iframe内容高度 iframe自适应高度终极解决Iframe设置高度后无法缩小问题

    这段JavaScript函数`setIFrameHeight(iframe)`通过获取`&lt;iframe&gt;`内的内容文档(`contentDocument`),然后比较`body`和`documentElement`(HTML根元素)的`scrollHeight`属性,取两者中较大的值作为`&lt;iframe&gt;`的新...

    iframe中页面显示不全1

    `&lt;iframe&gt;`标签在HTML中是这样定义的: ```html &lt;iframe src="https://example.com" width="500" height="300"&gt;&lt;/iframe&gt; ``` `src`属性指定要加载的URL,`width`和`height`分别定义了iframe的宽度和高度。这些...

    捕捉IFrame SRC改变事件

    在Web开发中,`&lt;iframe&gt;`(Inline Frame)是一种常用的元素,用于在当前网页中嵌入另一个独立的HTML文档。这为开发者提供了极大的灵活性,例如可以在主页面中加载不同的内容而无需刷新整个页面。然而,在使用`...

    iframe实例

    在HTML中,`&lt;iframe&gt;`元素是一个非常重要的组成部分,它允许我们在一个网页中嵌入另一个网页或者任何可渲染的内容,如视频、地图、文档等。`iframe`全称为"inline frame",即内联框架,它创建了一个独立的浏览上下文...

    iframe自适应高度 .txt

    1. **HTML `&lt;iframe&gt;` 元素**:`&lt;iframe&gt;`是一个可以用来嵌入外部文档或子窗口的标签。它可以嵌入其他HTML页面、图片、视频等资源。 2. **CSS 属性**: - `width` 和 `height`:用于设置`&lt;iframe&gt;`的宽度和高度。 ...

    iFrame 自动调整高度

    `&lt;iframe&gt;`标签用于在当前文档中嵌入另一个HTML文档。它有以下几个重要的属性: - `src`:指定要嵌入的HTML文档的URL。 - `width`:指定`&lt;iframe&gt;`的宽度。 - `height`:指定`&lt;iframe&gt;`的高度。 - `scrolling`:...

    ASP.NET iframe 的通用用法

    `&lt;iframe&gt;` 是 HTML 文档中用于嵌入另一个 HTML 文档的标签。它可以用来在当前页面中展示其他网页的内容,或者用于创建复杂的多窗口布局。在 ASP.NET 开发中,合理运用 `&lt;iframe&gt;` 能够提升用户体验,简化开发流程。...

    iframe框架透明样式

    `&lt;iframe&gt;`(Inline Frame)是HTML中用于显示另一个文档的内联框架。它可以用来嵌入一个网页或者特定的HTML文档片段,如地图、视频等多媒体内容。通过使用`&lt;iframe&gt;`,开发者可以在不离开当前页面的情况下加载外部...

    iframe 的使用

    &lt;iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"&gt;&lt;/iframe&gt; ``` - `src`:指定要加载的文档的 URL 地址。 - `width` 和 `height`:设置 Iframe 的宽度和高度。 - `scrolling`:控制 ...

    Iframe的用法

    &lt;iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"&gt;&lt;/iframe&gt; ``` 其中: - `src`:表示被嵌入页面的地址,可以是HTML文件、文本文件、ASP文件等。 - `width` 和 `height`:分别表示...

    用iframe做的遮罩层

    "用iframe做的遮罩层"是一个巧妙的实现方式,它利用了HTML5中的`&lt;iframe&gt;`标签来创建这样的效果。下面我们将详细讨论这个主题。 一、`&lt;iframe&gt;`标签介绍 `&lt;iframe&gt;`,全称为"Inline Frame",是HTML中的一种元素,...

    iframe高度自适应

    1. **`&lt;iframe&gt;`标签**:`&lt;iframe&gt;`(Inline Frame)是一个HTML标签,用于在当前文档中内联显示另一个文档。 - **属性**: - `src`:指定要加载的页面URL。 - `width`/`height`:指定`&lt;iframe&gt;`的宽度和高度。 -...

Global site tag (gtag.js) - Google Analytics