如何使用JavaScript或PHP将HTML代码添加到其他HTML文件

Question

好吧，所以我试图在我的网站上制作一个包含一些值的小页面，然后单击按钮时，它将这些值添加到另一个HTML页面上的div中。

我的代码是：

<input type="text" name="URL"><br>
<input type="text" name="ImageURL"><br>
<input type="text" name="Title">
<button onclick="addCode()">Submit</button>

因此，对于addCode（）函数，我需要它，以便它将值div内的值添加到另一个HTML文件上，如下所示：

<div class="item">
   <div class="animate-box">
      <a href=URL><img src=ImageURL></a>                
      <div class="fh5co-desc"><a style="TEXT-DECORATION:none; COLOR:#818892; LINE-HEIGHT:20px;" href=URL>Title</a></div>
   </div>
</div>

提前致谢。

Answer 1

做到这一点的唯一方法（不涉及其他技术）是使用localStorage ， storage事件。 而且，即使这样，它也仅在两个页面来自同一域并且同时在（同一浏览器的）不同浏览器选项卡中打开时才起作用。

如果存在这些情况，则在一个页面上修改localStorage将触发storage事件，可以将另一页面设置为监听。 然后，另一页可以通过拉出新值（将第一页写到localStorage ）并将它们放在您喜欢的第二页上的任何位置来响应事件。

如果您在旅行网站上打开了多个浏览器选项卡，则可能会遇到这种解决方案。 您可能在不同的选项卡中查看不同的航班选项。 如果一个选项卡的代码具有任何/所有其他打开的选项卡都应了解的更新，则此技术可以解决问题。

这是一个如何将值设置到localStorage并使用它们的示例。 但是， localStorage在Stack Overflow片段环境中不起作用，因此您可以在此处运行代码。

一旦这些值位于localStorage ，您就可以从同一域提供的任何其他页面中提取它们。 因此，我在此处显示的“ getItem”代码实际上将放置在您的“ page2.html”上。

 // Get DOM references: var name = document.getElementById("name"); var color = document.getElementById("color"); var airspeed = document.getElementById("airspeed"); var btn = document.getElementById("btnGo"); // Set up button click event handler: btn.addEventListener("click", function(){ // Get values and place in localStorage localStorage.setItem("name", name.value); localStorage.setItem("color", color.value); localStorage.setItem("airspeed", airspeed.value); // For demonstration, get values out of localStorage console.log("What is your name? ", localStorage.getItem("name")); console.log("What is your favorite color? ", localStorage.getItem("color")); console.log("What is the airspeed of a laiden swallow? ", localStorage.getItem("airspeed")); // If you wanted to redirect the user to the second page, now that the intial values // have been set, you could just do: location.href = "path to second page"; }); 

 <div>What is your name?<input type="text" id="name"></div> <div>What is your favorite color?<input type="text" id="color"></div> <div>What is the airspeed of a laiden swallow?<input type="text" id="airspeed"></div> <button id="btnGo">Go!</button> 

Answer 2

从技术上讲，您正在做的事情是不可能的。 没有某种持久性，那就是；

您无法编辑您不在的页面。 Web浏览是一种无状态技术。

如果您要填写这些输入，然后单击并重定向并提供这些值，则可以使用几种不同的方法：

1）查询字串

在第二页上编写代码，使其接受网址栏中查询字符串中的参数

function getURLParameter(name) {
  return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [null, ''])[1].replace(/\+/g, '%20')) || null;
}

var textDecoration = getUrlParameter('textdec'),
    color = getUrlParameter('color'),
    lineHeight = getUrlParameter('lnheight');

那么您可以将页面请求发送为

http://page.com/page?textdec="someval"&color="somecolor"&lnheight="someheight"

但是，如果您在当前页面之后不直接转到该页面，则此方法将不起作用

2）localStorage

在您的第一页上，设置本地存储值：

localStorage.setItem('lineHeight', 'someVal');
localStorage.setItem('color', 'someColor');
localStorage.setItem('textDecoration', 'someVal');

然后在第二页上检索值

var lineHeight = localStorage.getItem('lineHeight'),
    color = localStorage.getItem('color'),
    textDecoration = localStorage.getItem('textDecoration');

3）服务器端持久性

这将很大程度上取决于您的后端结构

但一般要点是发出发布请求（用ajax或其他方式）并在后端收集数据

然后在呈现第二页时，发送通过插值或作为脚本变量包含在内的已发布变量

Answer 3

如果您要编辑文件的实际源代码，则需要类似PHP的东西。 否则，JS就可以了。

---

PHP解决方案

您可以使用如下形式：

 <?php $old = file_get_contents("some_page.html"); $content = explode("<span>",$old,2); // replace <span> w/ opening tag $content = explode("</span>",$content[1],2); // replace </span> w/ closing tag $data = "new content of element"; $new = str_replace($content[0],$data,$old); ?> 

更新了JS解决方案

您不能使用我以前的解决方案。 相反，您必须在第二个HTML文件中创建一个可以从第一个文件调用的函数，如下所示：file2.html中的脚本：

 function set(id,val){ $("#"+id).html(val); // jQuery document.getElementById(id).innerHTML = val; // pure JS } 

file1.html中的脚本：

 var win = window.open("http://example.com"); // open the window win.set("some_id","Some content.") // the function that we set earlier 

请注意，一旦用户关闭或重新加载选项卡，它将恢复原状，并且仅适用于该用户和该选项卡。