将变量从一个HTML发送到另一个

时间:2012-03-10 10:20:05

标签: javascript html ajax variables

我有2个HTML网页,send.htmlreceive.html 在每个页面中我都有一个textield。我想要做的是,只要send.html中文本字段的“值”发生变化,就会自动将数据解析为receive.html的文本字段值。当我自动说,我的意思是不需要按钮或重新加载页面。

总结..我在send.html

中有这个文本
<input type="text" id="send" size="25" value="Val1">

receive.html

中的此文字字段
<input type="text" id="receive" size="25" value="Val2">

我想以某种方式“监视”Val1,如果它发生变化,我想要Val2 = Val1

出于我的目的,我不能使用jquery。 这可能吗?

3 个答案:

答案 0 :(得分:1)

我认为你错过了一个大图片。数据发送和接收需要一些服务器端交互,例如使用PHP,ASP,JSP,Python等,除非你对cookies没问题。

当您更新一个年龄段的字段时,该数据需要以某种方式进入服务器以捕获另一个页面。无论哪种方式,现在都不可能实现自动化的方式。但是,我将提供一个使用jQuery和PHP如何实现此目的的解决方案。但如果你想要?


更新

所以,似乎饼干是唯一的选择。请按照以下步骤进行操作

创建一个新文件cookie.js并将以下代码放在

function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
  {
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

接下来,使用此标记创建两个html文件“test1.html”和“test2.html”

<html>
<head>
    <script src="cookie.js"></script>
</head>
<body>
    <input type="text" id="text1" name="text1" />
</body>
</html>

现在,在test1.html上添加以下脚本

<script>
    window.onload = function() {
        document.getElementById("text1").onchange = function() {
                                                  // ^ use onkeyup if you want this to occur as you type
            setCookie("shared", this.value, 1);
            alert('oK, val changed so lets check it');              
        };
    };
</script>

在Test2.html上添加以下脚本

<script>
    var checkandupdate = function() {
           var shared = getCookie("shared");
           if(shared) {

              document.getElementById("text1").value = shared;
           }
    };

    window.onload = function() {
        int = setInterval("checkandupdate()",1000);
    };

</script>

现在

  • 打开两页
  • 转到test1.html并键入内容然后按Tab键以获取警报消息。
  • 打开test2.html,应该在1秒内更新
  • 演示工作完成后,根据需要更新字段名称

享受;)

答案 1 :(得分:0)

在您的第二个HTML页面中,假设我们在更改值时将其称为page-2.html?send=xyz,您添加以下JS代码:

function getQueryString() {
  var result = {}, queryString = location.search.substring(1),
      re = /([^&=]+)=([^&]*)/g, m;

  while (m = re.exec(queryString)) {
    result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
  }

  return result;
}

var sendValue= getQueryString()["send"];
document.getElementById("receive").value=sendValue;

答案 2 :(得分:0)

如果你想在没有cookie的情况下使用它来提高性能..你可以使用这个library它使用window.name来携带值..但是如果用户在新标签页中打开它将无法工作。还是很好..唯一的事情是你应该处理新的标签情况..

希望这会有所帮助..特别是如果它是基于html的前端会有所帮助..