javascript - 如何将 div 内容复制到另一个页面答案

【问题标题】：javascript - how to copy div content to another pagejavascript - 如何将 div 内容复制到另一个页面
【发布时间】：2014-04-10 08:03:29
【问题描述】：

我想从第 1 页自动复制 div 内容并将其粘贴到第 2 页的 div 中？实现这一目标的最佳、最简单的方法是什么？

【问题讨论】：

【解决方案1】：

根据您的要求，您可以在剪辑复制时将 div 的值保存在 LocalStorage 中，然后在单击粘贴时从 LocalStorage 中读取它。那是最简单的。

不幸的是，如果您想在他们系统的剪贴板上实际放置一些内容，则需要使用 Flash。

【讨论】：

【解决方案2】：

我认为最简单的方法是使用 iframe。您只需查看 page1 的内容并将其显示在 page2 上即可。

一个简单的例子：

<iframe name="inlineframe" src="pag1.html" frameborder="0" scrolling="auto" width="500" height="500" marginwidth="5" marginheight="5" ></iframe>

这是一个“简单”的解决方案。但当然还有其他方法。这个解决方案很简单，因为您不需要 jquery。

【讨论】：

【解决方案3】：

使用 jQuery 更容易完成，但您可以使用 innerHTML 获取 div 的 html，如下所示：

var div1 = document.getElementById('div1'),
div1html = div1.innerHTML;

将它复制到不同页面上的 div 但是需要一些工作..

我知道这并不能完全回答您的问题，我只是让您了解如何获取元素的 html。使用 JS 复制它，可能是这样的：

var div2 = document.getElementById('div2')
div2.appendChild(div1.cloneNode(true));

【讨论】：

【解决方案4】：

仅适用于 javascript 并支持 HTML5，

第 1 页：

var pageContent = document.getElementById("myDiv1").innerHTML; 
sessionStorage.setItem("page1content", pageContent);

第 2 页：

document.getElementById("myDiv2").innerHTML=sessionStorage.getItem("page1content");

【讨论】：