iframe与form的target简单应用

分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!

               

 大多网站都是有一个整体的固定结构,然后进行局部刷新,我们可以使用AJAX来刷新占位符DIV或者SPAN中的HTML代码的方式去实现。但是HTML片段的编写比整个HTML页面的编写要麻烦。所以许多网站都是使用iframe把整个页面分成几个相对独立的部分,每个部分都是对应一张完整的HTML页面。

      下面给出一个例子,是常用的iframe和form的配合使用的方式,很适合在MVC模式的架构下应用,例子非常简单:

主页面:iframe.html

<html>
<head>
<title>ha</title>
</head>
<body>
<form name="form1">
<div>
<iframe name="query" src="test.html"></iframe>
<iframe name="list"></iframe>
</div>
<div>
<iframe name="theID"></iframe>
<iframe name="theName"></iframe>
</div>
</form>
</body>

<form name="jumpform" target="theID" action="test.html">
<input type="submit" value="提交">
</form>

</html>

子页面:test.html

<html>
<head>
<title>HELLO</title>
</head>
<body>
BEN Hello!
</body>
</html>

我们看到主页面分成四个独立的块,iframe标签中通过属性src来指定要显示的HTML子页面,这里可以使用Javascript来动态显示。

我们还看到jumpform里面定义了target的值为iframe-theID,这时候,提交该form的时候,返回来的页面就会在theID的iframe中显示了。

target属性:
_blank ---------- 新开窗口
_self ----------- 自身
_top ------------ 主框架
_parent --------- 父框架
自定义名字 ----- 出现于框架结构,将会在该名称的框架内打开链接

target这个属性指定所链接的页面在浏览器窗口中的打开方式,它的参数值主要有:_blank、_parent、_self、_top,这些参数值代表的含义如下:

◎_blank,在新浏览器窗口中打开链接文件。

◎_parent,将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的,则在浏览器全屏窗口中载入链接的文件,就象_self参数一样。

◎_self,在同一框架或窗口中打开所链接的文档。此参数为默认值,通常不用指定。
但是我不太理解
◎_top,在当前的整个浏览器窗口中打开所链接的文档,因而会删除所有框架

 

           

给我老师的人工智能教程打call!http://blog.csdn.net/jiangjunshow
这里写图片描述
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用iframe文件上传是一种常见的网页文件上传技术。通过动态创建一个隐藏的iframe元素,并将表单的target属性设置为该iframe的name属性,实现了无刷新的文件上传操作。 以下是使用iframe文件上传的步骤: 1. 首先,在HTML页面中创建一个iframe元素,并设置其id和name属性,例如: ```html <iframe id="upload-iframe-unit" name="message_unit" style="display: none"></iframe> ``` 2. 在表单的onsubmit事件中调用一个JavaScript函数,该函数用于动态生成一个具有随机名称的iframe,并将表单的target属性设置为该iframe的name属性。示例代码如下: ```html <script type="text/javascript"> function iframeUp() { var fname = 'up' + Math.random(); // 生成一个随机名称 $("<iframe width='0' height='0' frameborder='0' name='" + fname + "'></iframe>").appendTo($('body')); // 动态生成一个iframe标签 $("form:first").attr('target', fname); // 将formtarget值改为iframe的name值 } </script> ``` 3. 在表单中添加文件上传输入框,并将其onchange事件设置为触发表单提交操作。示例代码如下: ```html <form action="upload.php" onsubmit="return iframeUp();" method="post" enctype="multipart/form-data"> <input type="file" name="pic" onchange="$('form').submit()" /> </form> ``` 通过以上步骤,当用户选择文件后,文件上传操作将在隐藏的iframe中进行,而不会影响当前页面的刷新。上传的文件将被提交到指定的服务器端处理脚本(例如upload.php),并可在该脚本中进行文件处理和保存操作。 请注意,以上示例代码仅提供了基本的使用iframe实现文件上传的概念和方法,具体的实现方式可能会因项目需求和环境差异而有所不同。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值