Page 2

Question

在第1页，我有div包含的信息。

<div id='information'></div>

在第2页，我有form textarea和一个按钮。

<form>
  <textarea id='new-info'></textarea>
  <input type='submit' id='submit-info' value='pass'/>
</form>

现在我想要的是当我点击提交按钮时，文本区域中输入的文本将在div#information中发布，以更改其先前的内容。
我已经看过很多关于如何更改div内容的帖子，但那些与我的问题无关。

Answer 1

希望这会让你知道如何做到这一点：

Page 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

}


?>

Page 1

<强> HTML

<div id='information'>
</div>

<强> JS

setInterval(search_after_info, 1000);


function search_after_info() {

    $.get('get_data', function(data) {

        $("#information").html(data);

    });

}

Answer 2

一种方法是像其他答案所提到的那样，让每个标签与中央服务器进行通信，中央服务器将获取/发送数据，以便使用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-B离线时反映出来，而无需给网络带来负担。

要了解详情，read this。

真实的例子。背景颜色由另一个标签控制。

     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 e.g. red. Or enter a color hex code e.g. #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>

Answer 3

你的意思是这样的事情？

$("#submit-info").click(function() {
   var content = $("#new-info").text();
   $("#information").html(content);
  });

如果您关于服务器端的事情，请详细说明您使用的技术。

Answer 4

这完全如下：第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>

更改另一页上div的内容

4 个答案:

Page 2

Page 1