更改另一页上div的内容
[英]Change content of a div on another page
问题描述
在第1页，我有一个包含信息的div 。
<div id='information'></div>
在第2页，我有一个带有textarea和按钮的form 。
<form>
<textarea id='new-info'></textarea>
<input type='submit' id='submit-info' value='pass'/>
</form>
现在我想要的是当我点击提交按钮时，文本区域中输入的文本将被发布在div#information更改其先前的内容。
我已经看过很多关于如何更改div内容的帖子，但那些与我的问题无关。
4 个解决方案
解决方案1
2 2014-02-16 10:52:48
一种方法是像其他答案所提到的那样，让每个标签与中央服务器进行通信，中央服务器将获取/发送数据以使用AJAX更新两个标签。
但是我在这里告诉你另一种方式，那就是使用我们已经为此类任务设计的内容。 所谓的浏览器localStorage
浏览器存储就像这个伪代码：
//set the value, it works as a hash map or assoc array.
localStorage .setItem("some_index_key", "some data") ;
// get the value by it's index key.
localStorage .getItem("some_index_key") ; // will get you "some data"
所有数据将在同一域的所有打开的选项卡之间共享。 并且您可以添加事件侦听器，以便每当一个值发生更改时，它将反映在所有选项卡上。
addEvent(window, 'storage', function (event) {
if (event.key == 'some_index_key') {
output.innerHTML = event.newValue;
}
});
addEvent(myInputField, 'keyup', function () {
localStorage.setItem('some_index_key', this.value);
});
看看这个DEMO ，您在A页面上编辑了一个字段，该值将在B页面上反映出来，而不需要给网络带来负担。
要了解更多信息，请阅读本文 。
真实的例子。 背景颜色由另一个选项卡控制。
var screenone = document.getElementById('screenone'); screenone.addEventListener('keydown', screenOneFunction); screenone.addEventListener('change', screenOneFunction); function screenOneFunction() { document.body.style.backgroundColor = this.value; localStorage.setItem("color1", this.value); } var screentwo = document.getElementById('screentwo'); screentwo.addEventListener('keydown', function (evt) { localStorage.setItem("color2", this.value); }); screentwo.addEventListener('change', function (evt) { localStorage.setItem("color2", this.value); }); var thebutton = document.getElementById('thebutton'); thebutton.addEventListener('click', function (evt) { localStorage.clear(); screenone.value = ""; screentwo.value = ""; document.body.style.backgroundColor = ""; }); var storageHandler = function () { document.body.style.backgroundColor = localStorage.color2; var color1 = localStorage.color1; var color2 = localStorage.color2; screenone.value = color2; screentwo.value = color1; }; window.addEventListener("storage", storageHandler, false);
.screenone{ border: 1px solid black;} input{ margin: 10px; width: 250px; height: 20px; border:round} label{margin: 15px;}
<html> <head> </head> <body> <label> Type a color name eg red. Or enter a color hex code eg #001122 </label> <br> <input type="text" class="screenone" id="screenone" /> <label> This tab </label> <br> <input type="text" class="screentwo" id="screentwo" /> <label> Other opned tabs </label> <br> <input type="button" class=" " id="thebutton" value="clear" /> </body> </html>
解决方案2
1 已采纳 2014-02-16 10:46:33
希望这会让你知道如何做到这一点：
第2页
HTML
<form>
<textarea id='new-info'></textarea>
<input type='submit' id='submit-info' value='pass'/>
</form>
JS
$("form").submit(function(e){
e.preventDefault();
$.post('save_data.php', { new_info:$("#new-info").val() }).done(function(data){
// Do something if you want to show that form has been sent
});
});
save_data.php
<?php
if (isset($_POST['new-info'])) {
// Update value in DB
}
?>
第1页
HTML
<div id='information'>
</div>
JS
setInterval(search_after_info, 1000);
function search_after_info() {
$.get('get_data', function(data) {
$("#information").html(data);
});
}
解决方案3
0 2014-02-16 10:23:07
你的意思是这样的事情？
$("#submit-info").click(function() {
var content = $("#new-info").text();
$("#information").html(content);
});
如果您关于服务器端，请告诉您使用的技术。
解决方案4
0 2014-02-16 11:03:20
这完全如下：第1页：
<form action="test2.htm" method="get">
<textarea name ='new-info'></textarea>
<input type = 'submit' id='submit-info' value ='pass' onclick="postData();"/>
第2页
<div id="information"></div>
<script>
if (location.search != "")
{
var x = location.search.substr(1).split(";")
for (var i=0; i<x.length; i++)
{
var y = x[i].split("=");
var DataValue = y[1];
document.getElementById("information").innerHTML = DataValue;
}
}
</script>
如何使用javascript将一个html页面上的div内容与另一页面上的div内容更改？
[英]How to change the content of a div on one html page with the contents of a div from another page using javascript?
如何使用 AJAX 将 div 内容替换为另一个页面的 div 内容？
[英]How to replace div content with div content of another page using AJAX?
单击如何在div中切换内容并在另一个div中更改内容
[英]How to toggle content in a div and change content in another div, on click
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.