iframe&form的target学习

本文介绍了一种在不刷新整个页面的情况下仅更新特定iframe内容的方法。通过设置target属性为特定iframe的名称,可以实现只更新该iframe中的内容,而页面其他部分保持不变。这种方法适用于需要频繁更新部分内容但又不想影响用户体验的场景。
Problem:
刷新主页面中的其中一个iframe,其他内容不变

Solution:
main.jsp
<body onload="getValueFromFrame()">
<form>
<div>
<iframe name="query" src="query.jsp"></iframe>
<iframe name="list"></iframe>
</div>
<div>
<iframe name="theID"></iframe>
<iframe name="theName"></iframe>
</div>
</form>
</body>

query.jsp
<form action="list.jsp" method="post" target="list">
<input type="text" name="theName">
<input type="submit" value="Submit"/>
</form>

list.jsp
<body>
<%=request.getParameter("theName") %>
</body>

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

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

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

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

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

[color=red]target 指定其实就是你提交的页面要放的位置[/color]
代码下载地址: https://pan.quark.cn/s/35e46f7e83fb 关于 Build Status Lines of code 这是一个参考 PotPlayer 的界面使用 Java 以及图形界面框架 JavaFX 使用 MCV 图形界面与业务逻辑分离的开发模式, 所开发的个人视频播放器项目, 开发这个项目旨在于学习图形界面框架 JavaFX 实现了具有和 PotPlayer相同 的简洁界面和流畅的操作逻辑。 Note: PotPlayer 是 KMPlayer 的原制作者姜龙喜先生(韩国)进入 Daum 公司后的 新一代网络播放器, PotPlayer的优势在于强大的内置解码器以及支持各类的 视频格式, 而且是免费下载提供使用的。 目前版本: 2020/10/28 v1.0.0 [x] 支持打开文件自动播放 [x] 支持查看播放记录 [x] 支持屏幕边沿窗口自动吸附 [x] 支持双击视频来播放和暂停 [x] 支持左键点击窗口任意位置来拖到窗口 [x] 支持左键双击播放窗口打开文件 [x] 支持根据视频尺寸自动调整窗口大小 [x] 支持根据播放文件类型调整窗口模式 [x] 支持根据视频尺寸自动调整窗口显示位置防止超出屏幕 [x] 支持记录上一次访问的文件路径 [x] 支持播放记录文件读写 已实现样式 未播放效果: 播放效果: 运行环境 本项目使用 NetBeans 配合 JDK 开发, NetBeans8.0 以及 JDK8.0 以上版本的均可以运行。 亦可使用其他集成开发环境, 例如 Eclipse, IntelliJ IDEA 配合使用 JDK8.0 以上版本均可构建此项目。 NetBeans download Eclipse downlo...
在 HTML 中,form 标签和 iframe 标签是两个重要的元素,各自有着独特的功能和用途。 ### form 标签 form 标签用于创建 HTML 表单,它是用户与网页进行交互的重要方式,可用于收集用户输入的信息,如文本、密码、单选框、复选框等,并将这些信息提交到服务器进行处理。 - **属性**:form 标签的属性用于定义表单的行为和提交方式。 - **action**:指定表单数据提交的 URL 地址。例如,`action="submit.php"` 表示表单数据将提交到 `submit.php` 页面进行处理。 - **method**:规定表单数据的提交方式,主要有 `get` 和 `post` 两种。`get` 方式会将表单数据附加在 URL 的查询字符串中,而 `post` 方式则将表单数据放在 HTTP 请求的主体中。 - **enctype**:当表单包含文件上传时,需要设置该属性。常见的值有 `application/x-www-form-urlencoded`(默认值)、`multipart/form-data`(用于文件上传)和 `text/plain`。 - **使用场景**:form 标签常用于用户注册、登录、搜索、反馈等需要用户输入信息并提交的场景。 ### iframe 标签 iframe 标签是一个嵌套的标签,用于在当前 HTML 页面中嵌入另一个 HTML 页面,形成一个独立的窗口。 - **属性**:iframe 标签的属性用于控制嵌入窗口的外观和行为。 - **name**:为 iframe 指定一个名称,该名称通常需要和 a 标签的 target 属性结合使用,以便在点击链接时将链接内容显示在指定的 iframe 中。例如,`<iframe name="xxx" src=" " frameborder="0"></iframe>` 和 `<a href=" " target="xxx"></a>` [^1]。 - **src**:指定要嵌入的 HTML 页面的 URL 地址。例如,`<iframe src="http://baidu.com"></iframe>` 会在当前页面中嵌入百度的网页。 - **scrolling**:控制是否显示滚动条,可选值有 `yes`(显示滚动条)、`no`(不显示滚动条)和 `auto`(根据内容自动显示滚动条)。 - **width 和 height**:分别设置 iframe 的宽度和高度,可以使用像素(px)或百分比(%)作为单位。 - **frameborder**:设置是否显示边框,`0` 表示不显示边框,`1` 表示显示边框。 - **marginheight 和 marginwidth**:分别设置 iframe 内容与顶部和左右的距离。 - **使用场景**:iframe 标签常用于在网页中嵌入广告、地图、视频等外部内容,或者将多个网页文件组合成一个文件,形成框架集 [^5]。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Form and Iframe Example</title> </head> <body> <!-- form 标签示例 --> <form action="submit.php" method="post"> <label for="username">用户名:</label> <input type="text" id="username" name="username"><br> <label for="password">密码:</label> <input type="password" id="password" name="password"><br> <input type="submit" value="提交"> </form> <!-- iframe 标签示例 --> <iframe name="main" src="http://baidu.com" scrolling="no" width="100%" height="500px" frameborder="0"></iframe> <a target="main" href="http://qq.com">进入 QQ</a> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值