在一个HTML页面中输入值，另一个HTML页动态显示它，每次都没有新的值

Enter Value in one HTML page and other html page shows it dynamically, without a new one everytime

本文关键字：HTML 动态显示 另一个 一个 输入      更新时间：2023-09-26

需求

  1. 为一个html页面中的字段添加值
  2. 提交
  3. 应该在另一个html页面上显示该值
  4. 第一个页面上的任何更新都应该更新第二个页面，而不是打开新的页面

我写了一些HTML，如下所示。发生的事情是，一旦我按下提交，它会在同一窗口中打开另一个页面（page2.html）。我想要的是有两个html窗口，每当我更新主页时，它都应该反映在同一个页面上。（page2.html）

Home.html
<code>
<html>
    <form target="_blank" type=get action="page2.html">
        <table>
            <tr>
                <td>OrderID:</td>
                <td><input type=text name=orderId size=10></td>
            </tr>
            <tr>
                <td colspan=2><input type=submit value="Submit"></td>
            </tr>
        </table>
    </form>
</html>


page2.html
<code>
<html>
    <script LANGUAGE="JavaScript">
        function getParams(){
            var idx = document.URL.indexOf('?');
            var params = new Array();
            if (idx != -1) {
                 var pairs = document.URL.substring(idx+1, document.URL.length).split('&');
                for (var i=0; i<pairs.length; i++){
                    nameVal = pairs[i].split('=');
                    params[nameVal[0]] = nameVal[1];
                }
             }
             return params;
        }
        params = getParams();
        firstname = unescape(params["orderId"]);
        document.write("OrderID = " + firstname + "<br>");
    </script>
</html>

将params初始化为空对象而不是数组：

var params = {};

这将允许您对键使用字符串和其他值。

声明变量时请确保包含var：

var params = getParams();
var firstName = unescape(params["orderId"]);

这对学习来说很好，但尽量不要使用document.write。最好使用：https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild.在这种情况下，您可以通过以下操作将其添加到正文中：

var p = document.createElement("p");
p.innerHTML = "OrderID = " + firstname;
document.body.appendChild(p);

除此之外，您的代码看起来还不错。如果您仍有问题，请发表评论。使用firebug或chrome的控制台来发布任何错误。

我可以通过在home.html 中添加target="page2.html"来实现这一点

相关文章：