提交数据给iframe

此代码片段可以让你将数据提交给iframe,不使用任何js,也不需要跳转即可直接提交。

代码

<form action="https://www.codeku.run/?s=php" target="iframe" method="get">	
		<label for="text">输入内容:</label>
		<input type="text" name="s" id="text">
		<input type="hidden" name="type" value="post">
		<input type="submit" value="发布">
	</form>
<iframe name="iframe" src="https://www.codeku.run"></iframe>

实现效果如下:

完整源代码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style>
		iframe{
			width: 100%;
			height: 100vh;
		}
	</style>
</head>
<body>
	<form action="https://www.codeku.run/?s=php" target="iframe" method="get">	
		<label for="text">输入内容:</label>
		<input type="text" name="s" id="text">
		<input type="hidden" name="type" value="post">
		<input type="submit" value="发布">
	</form>
	<iframe name="iframe" src="https://www.codeku.run"></iframe>
</body>
</html>

原理讲解

表单的target设置为iframe(为iframe名称),则会将数据提交给iframe。

注意:iframe的name属性必须与form的target属性一致。

人已赞赏
建站程序

WordPress判断邮箱格式是否正确

2020-5-27 17:27:00

实用片段

html让iframe加载更流畅

2020-4-25 14:04:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索