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

HTML <iframe>

HTML框架ServletAjax浏览器 
阅读更多
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>");
}
}
分享到：
| ext 经验
评论
发表评论

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

相关推荐

    html 网页加载

    &lt;iframe src="show.asp" frameBorder="0" width="500" scrolling="no" height="230"&gt;&lt;/iframe&gt;

    Web前端基础：HTML5浮动框架.pptx

    &lt;iframe src=“index.html”&gt; &lt;/iframe&gt; 在&lt;iframe&gt;和&lt;/iframe&gt; 之间放置的文本，在浏览器不支持iframe时将会显示。 iframe 元素会创建包含另外一个文档的内联框架。src属性值指向要包含的页面地址 &lt;iframe&gt; 标签...

    Html5中文手册(程序员必备手册)

    42、&lt;iframe&gt; 定义行内的子窗口（框架）。 43、&lt;img&gt; 定义图像。 44、&lt;input&gt; 定义输入域。 45、&lt;ins&gt; 定义插入文本。 46、&lt;keygen&gt; 定义生成密钥。 47、&lt;label&gt; 定义表单控件的标注。 48、&lt;legend&gt; 定义 fieldset ...

    index.html

    &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt;... &lt;button&gt;&lt;a href="index.html"&gt;Again&lt;/a&gt;&lt;/button&gt; &lt;/form&gt; &lt;/center&gt; &lt;/p&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;

    html新手3分钟速成秒杀一切教程

    最后，别忘了把这些部分组成一体----网页，所以咱们就用&lt;html&gt;&lt;/html&gt;把他们给包起来。 好了，咱们来大体看看网页的结构： &lt;html&gt; &lt;head&gt; &lt;title&gt; 标题 &lt;/title&gt; &lt;/head&gt; &lt;body&gt; 页面内容 &lt;/body&gt; &lt;/html&gt;

    超强html 标签大全

    &lt;IFRAME&gt;&lt;/IFRAME&gt; 创建一个内联的帧 scr="..."定义在帧中显示的内容的来源 frameborder="..."定义帧之间的边界(0或1) align="..."被反对。控制对齐方式(left, center, right, justify) height="..."帧的高度 width=...

    搜索引擎名次查询.net版源码下载

    &lt;body onload="&lt;% If Request.Form &lt;&gt;"" Then %&gt;initFadeTicker();&lt;% End If %&gt;document.form1.url.focus()"&gt; &lt;br&gt; &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt; &lt;tr&gt; &lt;td valign=...

    C#编程经验技巧宝典

    10&lt;br&gt;&lt;br&gt;0023　如何添加引用第3方控件　11&lt;br&gt;&lt;br&gt;0024　如何生成DLL文件　11&lt;br&gt;&lt;br&gt;0025　如何使用不安全代码　11&lt;br&gt;&lt;br&gt;第2章　语言基础　13&lt;br&gt;&lt;br&gt;2.1　注释　14&lt;br&gt;&lt;br&gt;0026　如何对代码进行注释　14&lt;br&gt;...

    网易编辑器用法演示===编辑器

    网易编辑器用法演示 &lt;html&gt; &lt;head&gt; &lt;meta ...&gt;&lt;/iframe&gt; &lt;br&gt;&lt;br&gt; &lt;input type="button" value="查看隐藏表单的内容" onClick="alert(content.value);"&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt;

    ASP.Net电子商务网站后台模板

    &lt;html&gt; &lt;head&gt; &lt;title&gt;电子商务网站管理&lt;/title&gt; &lt;link href="css/style.css" type="text/css" rel="stylesheet"&gt; &lt;link href="css/default.css" type="text/css" rel="stylesheet"&gt; &lt;script language=...

    js 框架之一

    &lt;br&gt; }&lt;br&gt; &lt;/script&gt;&lt;br&gt; &lt;/head&gt;&lt;br&gt; &lt;br&gt; &lt;body&gt;&lt;br&gt; &lt;div id=cpst style="display:none"&gt;&lt;br&gt; &lt;br&gt; &lt;iframe src="image/cpst.jpg" &lt;br&gt;style="position:absolute; visibility:inherit; top:0px; left:0px; ...

    js:限制页面必须在框架内·完美版：保证父框架启动的后，自动打开原来页面！

    说明： &lt;br&gt;&lt;br&gt;主要用于框架（iframe）程序 &lt;br&gt;现在演示的是htm页面，也适用于asp/asp.net，当然jsp或者php也应该能用，不过我本人不感兴趣，没有测试过。 &lt;br&gt;打开目标页面（a.html）之后，目标页面后自动启动父...

    不用ajax也可以达到不刷新页面

    &lt;form action="submit.html" method="post" target="myframe"&gt; &lt;h2&gt;请输入用户名和密码：&lt;/h2&gt; &lt;p&gt; &lt;!-- 用户名的输入框 --&gt; 用户名：&lt;input type="text" name="username" value="" id="username"/&gt;...

    asp.net程序开发范例宝典

    第2章　HTML开发与实践　15&lt;br&gt;2.1　框架的使用　16&lt;br&gt;实例009　使用FrameSet框架布局聊天室　16&lt;br&gt;实例010　使用IFrame框架布局企业管理系统　17&lt;br&gt;2.2　滚屏的实现　18&lt;br&gt;实例011　滚动显示博客公告　18&lt;br&gt;...

    京东首页静态模板

    &lt;a href=""&gt;北京&lt;/a&gt;&lt;a href=""&gt;上海&lt;/a&gt;&lt;a href=""&gt;天津&lt;/a&gt;&lt;a href=""&gt;重庆&lt;/a&gt;&lt;a href=""&gt;河北&lt;/a&gt;&lt;a href=""&gt;山西&lt;/a&gt;&lt;a href=""&gt;河南&lt;/a&gt;&lt;a href=""&gt;辽宁&lt;/a&gt;&lt;a href=""&gt;吉林&lt;/a&gt;&lt;a href=""&gt;黑龙江&lt;/a&gt;&lt;a href...

    关于梅花雨日历不同页面标准下的显示问题

    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;br&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;br&gt;标准二、&lt;br&gt;&lt;!DOCTYPE HTML ...

    新浪推荐浮动广告

    /&gt;&lt;br&gt;&lt;title&gt;test&lt;/title&gt;&lt;br&gt;&lt;/head&gt;&lt;br&gt;&lt;body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0"&gt;&lt;br&gt;&lt;table height=1000&gt;&lt;br&gt;&lt;tr&gt;&lt;td&gt;dddd&lt;/td&gt;&lt;/tr&gt;&lt;br&gt;&lt;/table&gt;&lt;br&gt;&lt;/body&gt;&lt;br&gt;&lt;/html&gt;&lt;br&gt;&lt;br&gt;...

    一个简单的网页设计

    &lt;option&gt;学生&lt;/option&gt;&lt;option&gt;一年&lt;/option&gt;&lt;option&gt;二年&lt;/option&gt;&lt;option&gt;三年&lt;/option&gt;&lt;option&gt;三年到五年&lt;/option&gt;&lt;option&gt;五年到十年&lt;/option&gt;&lt;option&gt;十年以上&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; ...

    Ajax in action 英文版配书源码.rar

    18 to run the examples using Content-centric, Script-centric (iframe), script-centric (eval), and Data-centric (XML or JSON) approaches.planets.html shows the Object BRowser in action.&lt;br&gt;&lt;br&gt;Chapter ...

    讯时新闻文章管理系统 v3.0(源码)

    &lt;br&gt;3、框架(iframe)和JS两种调用新闻和图片新闻，以及图片新闻的自定义横排和竖排。&lt;br&gt;4、强大的后台文章编辑器的功能。可方便地用拖动的方式进行图文混排、图片远程上传、上传图片显示效果处理等操作，以及"从...

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