表单提交 form选择
2024-04-05 22:35:42
很久没写前端代码了，都有点生疏了。之前是将parent的form 提交，跳转到adeny的渠道页面。这样容易导致我们H5对页面不可控，用户不能回退。
修改前 页面代码
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>3D Secure Verification</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><script>//designWidth:设计稿的实际宽度值，需要根据实际设置//maxWidth:制作稿的最大宽度值，需要根据实际设置//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750);(function (designWidth, maxWidth) {var doc = document,win = window,docEl = doc.documentElement,remStyle = document.createElement("style"),tid;function refreshRem() {var width = docEl.getBoundingClientRect().width;maxWidth = maxWidth || 540;width = width > maxWidth ? maxWidth : widthvar rem = width * 100 / designWidth;remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';}if (docEl.firstElementChild) {docEl.firstElementChild.appendChild(remStyle);} else {var wrap = doc.createElement("div");wrap.appendChild(remStyle);doc.write(wrap.innerHTML);wrap = null;}//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；refreshRem();win.addEventListener("resize", function () {clearTimeout(tid); //防止执行两次tid = setTimeout(refreshRem, 300);}, false);win.addEventListener("pageshow", function (e) {if (e.persisted) { // 浏览器后退的时候重新计算clearTimeout(tid);tid = setTimeout(refreshRem, 300);}}, false);if (doc.readyState === "complete") {doc.body.style.fontSize = "16px";} else {doc.addEventListener("DOMContentLoaded", function (e) {doc.body.style.fontSize = "16px";}, false);}})(750, 750);</script><link rel="stylesheet" type="text/css" href="/api/client/style/oops.css" /></head><body><span><form method='POST' action='https://test.adyen.com/hpp/3d/validate.shtml' id='3dform'><input type='hidden' name='***' value='******' /><input type='hidden' name='***' value='******' /><input type='hidden' name='***' value='******' /></form></span><script type="text/javascript">/*<![CDATA[*/if (undefined != document.forms[0]) {if (window.top !== window) {document.forms[0].target = "_parent";}document.forms[0].submit();} /*else {setInterval('countDown()', 1000);}*/var sec = 10;var num = document.getElementById("seconds");function countDown() {if (sec > 0) {num.innerHTML = sec--;} else {window.location.href = null;}}//js通知appwindow.onload = function(){if(null == '<form method=\'POST\' action=\'https://test.adyen.com/hpp/3d/validate.shtml\' id=\'3dform\'>\n <input type=\'hidden\' name=\'***\' value=\'******' />\n <input type=\'hidden\' name=\'**\' value=\'*****\' />\n <input type=\'hidden\' name=\'***\' value=\'******\' />\n<\/form>'){webviewInstance.callNative(null);} }/*]]>*/</script></body>
</html>H5包上服务端页面，服务端利用iframe form提交，
formContent： <form method='POST' action='https://test.adyen.com/hpp/3d/validate.shtml' id='3dform' target='selfIframe'>
<input type='hidden' name='***' value='******' />
<input type='hidden' name='***' value='******' />
<input type='hidden' name='***' value='******' />
</form>
url：https://test.adyen.com/hpp/3d/validate.shtml
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head><title th:text="${title}">Jcpay secure online payment</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><meta http-equiv="X-UA-Compatible" content="ie=edge"/><script>//designWidth:设计稿的实际宽度值，需要根据实际设置//maxWidth:制作稿的最大宽度值，需要根据实际设置//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750);(function (designWidth, maxWidth) {var doc = document,win = window,docEl = doc.documentElement,remStyle = document.createElement("style"),tid;function refreshRem() {var width = docEl.getBoundingClientRect().width;maxWidth = maxWidth || 540;width = width > maxWidth ? maxWidth : widthvar rem = width * 100 / designWidth;remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';}if (docEl.firstElementChild) {docEl.firstElementChild.appendChild(remStyle);} else {var wrap = doc.createElement("div");wrap.appendChild(remStyle);doc.write(wrap.innerHTML);wrap = null;}//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；refreshRem();win.addEventListener("resize", function () {clearTimeout(tid); //防止执行两次tid = setTimeout(refreshRem, 300);}, false);win.addEventListener("pageshow", function (e) {if (e.persisted) { // 浏览器后退的时候重新计算clearTimeout(tid);tid = setTimeout(refreshRem, 300);}}, false);if (doc.readyState === "complete") {doc.body.style.fontSize = "16px";} else {doc.addEventListener("DOMContentLoaded", function (e) {doc.body.style.fontSize = "16px";}, false);}})(750, 750);</script><link rel="stylesheet" type="text/css" href="/api/client/style/oops.css" />
</head>
<body><div th:if="null == ${formContent}"><img /><div th:switch="${title}"><div th:case="'3D Secure Verification'"><div th:switch="${tradeStatus}"><div th:case="'P'"><img class="pic-lucky" src="/api/client/img/Pending_@2X.png"/><p class="text-1" th:text="#{ECA000001201}">Pending/Processing</p><p class="text-2" th:text="#{ECA000001202}">The payment is awaiting processing.</p></div><div th:case="'S'"><img class="pic-lucky" src="/api/client/img/Completed_@2X.png"/><p class="text-1" th:text="#{ECA000001224}">Completed</p><p class="text-2" th:text="#{ECA000001225}">The payment was successful.</p></div><div th:case="*"><img class="pic-lucky" src="/api/client/img/OOPS_@2X.png"/><p class="text-1" th:text="#{ECA000001221}">OOPS</p><p class="text-2" th:if="null == ${errorMessage}" th:text="#{ECA000001301}"></p><p class="text-2" th:if="null != ${errorMessage}" th:text="${errorMessage}"></p></div></div></div><div th:case="*"><img /><img class="pic-lucky" src="/api/client/img/OOPS_@2X.png"/><p class="text-1" th:text="#{ECA000001221}">OOPS</p><p class="text-2" th:if="null == ${errorMessage}" th:text="#{ECA000001301}"></p><p class="text-2" th:if="null != ${errorMessage}" th:text="${errorMessage}"></p></div></div><!-- <p>Will jump page in <span id="seconds">10</span> seconds. <a th:href="${returnUrl}">Click me go back</a></p> --></div><span th:utext="${formContent}"></span> <iframe name="selfIframe" src="${url}" width="100%" height="100%"></iframe><script type="text/javascript" th:inline="javascript">/*<![CDATA[*/if (undefined != document.forms[0]) {document.forms[0].submit();} /*else {setInterval('countDown()', 1000);}*/var sec = 10;var num = document.getElementById("seconds");function countDown() {if (sec > 0) {num.innerHTML = sec--;} else {window.location.href = [[${returnUrl}]];}}//js通知appwindow.onload = function(){if(null == [[${formContent}]]){webviewInstance.callNative([[${tradeStatus}]]);} }/*]]>*/</script>
</body>
</html>表单提交 form选择相关推荐
- 表单提交-form提交和ajax提交
1.使用场景: 安全性都一样,都是发送的http协议.安全性与提交文件的业务处理(格式检测,防注入)有关,与提交方式无关. 一般登录用表单提交,点击提交触发submit事件,一般会 使页面发生跳转,页 ...
- 表单提交-form，快速取值
前段页面: form表单设置id,为了方便使用,前段提供了一个方法(form表单序列化) js如下: 1.通过form的id获取有name属性的所有输入的值, 2.因为直接通过序列化取得表单的所有值会 ...
- php sku 表单提交,Form扩展-商品SKU
能力有限,欢迎各位大神积极完善 安装 composer require jadekun/sku php artisan vendor:publish --provider="JadeKun\ ...
- 新开窗口不被拦截的方法-window.open和表单提交form
$("#btn").click(function() {var w = window.open();setTimeout(function() {w.location = &quo ...
- ajax form表单提交_LayUI提交表单，监听select，分页组件
1.LayUI提交表单 这几天做项目,用到提交layui框架的弹出层的表单,因为需要在提交表单后,关闭当前弹出层,同时刷新父窗口的数据,因此,用普通的提交就不行了,因为普通的提交到后台之后没有返回值, ...
- html 提交form表单提交数据格式,form表单提交数据
form表单提交的几种方法 HTML表单提交的几种方式方式一:通过submit按钮提交方式二:通过一般按钮button提交1/3javascript">functionsubmit1( ...
- jQuery 阻止表单提交
1. 利用 οnsubmit="return false" 阻止表单提交 <form action="" method="get" ...
- ajax form表单提交_开发日志：金数据表单自动提交脚本
最近学校要求我们每天通过一个在线表单打卡自己在家做的体育课项目,在提交的时候我突然想了下如果能有一个自动的系统每天帮我自动打卡岂不是能省很多时间?而且我一直很想学Python的网络爬虫以及服务器后端的 ...
- Java入力项目无法设定到form_html中关于form与表单提交操作的资料集合
原标题:html中关于form与表单提交操作的资料集合 这里我们介绍一下form元素与表单提交方面的知识. form元素 form元素的DOM接口是HTMLFormElement,继承自HTMLEle ...
最新文章
- 华为荣登2015年VoIP和IMS市场榜首
- webpack+vue+mint-ui 实现上拉加载更多（Loadmore组件）
- 【python数据挖掘课程】十一.Pandas、Matplotlib结合SQL语句可视化分析
- 外参矩阵（旋转矩阵+平移向量）以及外方位元素的关系
- splice方法_JavaScript数组_数组方法【一】（二十六）
- [深度学习] 自然语言处理 ----- Attention机制中的Q,K,V介绍
- Angular：升级Angular 13到Angular 14
- 云服务器维护包含哪些,云服务器维护内容
- 云计算在美国的五年是如何发展的？
- 软件测试性能工程师工资,软件测试工程师工资一般多少 前景怎么样
- ToolkitScriptManager与ScriptManager
- 1000瓶药水，只有一瓶是有毒的，如何使用最少的小白鼠测出那瓶是毒药？
- Shell脚本语法小全
- windows8 linux双系统,小白如何在Windows 8.1的笔记本上安装ubuntu双系统
- 图书盘点机软件作为图书盘点机使用
- 做好企业数据管理，用什么样的数据开发平台？
- C++函数与结构体——最厉害的学生
- Socket 错误一览表，Socket Error Code
- 【考研plog】考研专业目录考纲整理第一弹
- Ubuntu18.04安装Realtek网卡驱动