问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

将数据从一个 HTML 文件传输到另一个

社区维基
1
新手上路，请多包涵

我是 HTML 和 JavaScript 的新手，我想做的是从一个 HTML 文件中提取设置在那里的内容并通过 JavaScript 将其显示到另一个 HTML 文件中。

这是我到目前为止所做的测试：

测试.html

<html>
<head>
   <script language="javascript" type="text/javascript" src="asd.js"></script>
</head>

<body>

<form name="form1" action="next.html" method="get">
name:<input type ="text" id="name" name="n">
<input type="submit" value="next" >
<button type="button" id="print" onClick="testJS()"> Print </button>
</form>

</body>
</html>

下一个.html

<head>
   <script language="javascript" type="text/javascript" src="asd.js"></script>
</head>

<body>

<form name="form1" action="next.html" method="get">
<table>
    <tr>
        <td id="here">test</td>
    </tr>
</table>
</form>

</body>
</html>

asd.js

function testJS()
{

var b = document.getElementById('name').value

document.getElementById('here').innerHTML = b;

}

test.html -> ads.js （将从 test.html 中提取值并设置为 next.html）-> next.html

原文由 newbie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascripthtml
阅读 622
1 个回答
得票最新
社区维基
1

试试这个代码：在 testing.html

 function testJS() {
    var b = document.getElementById('name').value,
        url = 'http://path_to_your_html_files/next.html?name=' + encodeURIComponent(b);

    document.location.href = url;
}

在 next.html 中：

 window.onload = function () {
    var url = document.location.href,
        params = url.split('?')[1].split('&'),
        data = {}, tmp;
    for (var i = 0, l = params.length; i < l; i++) {
         tmp = params[i].split('=');
         data[tmp[0]] = tmp[1];
    }
    document.getElementById('here').innerHTML = data.name;
}

说明：javascript不能在不同的页面之间共享数据，我们必须使用一些解决方案，例如URL get params（在我的代码中我使用这种方式），cookies，localStorage等。将name参数存储在URL中（？name = …) 并在 next.html 中解析 URL 并从上一页获取所有参数。

附言。我的母语不是英语，如有必要，请您更正我的信息

原文由 Alex Fitiskin 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题