Question

我有一个网页 - （aboutMe.html）with - img（#profile） - h4（#title） - div（#txt1） - 按钮（#edit）。

<form action="editMe.html" method="GET"> 
        <button type="button"  onclick="btntest_onclick()"> Edit </button>
        <img id="profile" src="images/pic/img1.jpg" />
        <h3 id="title"> TITLE GOES HERE</h3>
        <div id="txt1">
            <p>Who Am I ?</p> 
        </div>
</form>

function btntest_onclick() 
{   
    var title = document.getElementById('title').value;
    var txt1=document.getElementById('txt1').value;
    var url = "editMe.html?title=" + encodeURIComponent(title) +  
              "&txt1="+encodeURIComponent(txt1) ;
    document.location.href = url;
}

当我点击按钮时，它会打开第二个网页 - （editMe.html）with - img（#profile） - textarea（#title） - textarea（#txt1） - 按钮（#save）。

 <form  action="editMe.html" method="GET" onload="load()"> 
    <img id="profile" src="#" /> 
    <textarea id="title"> </textarea>
    <textarea id="txt1">  </textarea>  
 </form>

 function load()
 {  
    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('title').innerHTML = data.title;
    document.getElementById('txt1').innerHTML = data.txt1;
 }

当第二页加载时，它应该从aboutMe.html获取参数title，txt1值。但是这段代码不起作用。请更正以上代码

Answer 1

你有几个场景：

尝试将两个html合并为一个。
传递您的内容＆amp;图像paratemers通过http请求，如editMe.html?image=IMAGE_URL&title=TITILE_CONTENT
将值存储到浏览器存储：cookie或localStorage。
将值存储到后端服务器。

Answer 2

我已通过此代码解决了这个问题：

aboutMe.html

<form action="editMe.html" method="GET"> 
    <button type="button"  onclick="btntest_onclick()"> Edit </button>
    <img id="profile" src="images/pic/img1.jpg" />
    <h3 id="title"> TITLE GOES HERE</h3>
    <div id="txt1">
        <p>Who Am I ?</p> 
    </div>
</form>

javascript：

function btntest_onclick() 
{   
   var profile=document.getElementById("profile").src;
   var title = document.getElementById("title").innerHTML;
   var txt1=document.getElementById("txt1").innerHTML; 

   var url = "editMe.html?profile=" + encodeURIComponent(profile)+ 
                         "&title=" + encodeURIComponent(title) +   
                         "&txt1="+encodeURIComponent(txt1) ;
    document.location.href = url;
}

** editMe.html **

<body  onload="load()">
    <form  action="editMe.html" method="GET"> 
      <img id="profile" src="#" /> 
      <textarea id="title"> </textarea>
      <textarea id="txt1">  </textarea>  
    </form>
</body>

javascript：

function load()
{  
    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("profile").src=decodeURIComponent(data.profile);
    document.getElementById("title").innerHTML = decodeURIComponent(data.title);
    document.getElementById('txt1').innerHTML = decodeURIComponent(data.txt1);
}

从html页面传递参数另一个html页面

2 个答案: