将内容表从 iframe 移动到 iframe 之外的另一个表答案

【问题标题】：Move content table from iframe to another table outside iframe将内容表从 iframe 移动到 iframe 之外的另一个表
【发布时间】：2018-02-21 13:23:25
【问题描述】：

我想将 iframe 中表格的内容移动到 iframe 之外的另一个表格，反之亦然，只需单击复选框。

我有 page1.html 和 page2.html

这里是第一个没有 iframe 的代码

<table border="1px" id="list1">
<thead>
    <tr>
        <th colspan="2">List</th>
    </tr>
    <tr>
        <th >n&ordm</th>
        <th >Product</th>       
    </tr>
</thead>

<table border="1px" id="stock">
<thead>
    <tr>
        <th colspan="2">Stock</th>
    </tr>
    <tr>
        <th>n&ordm</th>
        <th>Product</th>      
    </tr>
</thead>
<tbody>
    <tr>
        <td><input type="checkbox" name="nnumber"  />1</td>
        <td>Mouse</td>     
    </tr>
    <tr>
        <td><input type="checkbox" name="nnumber"  />2</td>
        <td>Keyboard</td>     
    </tr>
    <tr>
        <td><input type="checkbox" name="nnumber"  />3</td>
        <td>Webcam</td>     
    </tr>
</tbody>

<script type="text/javascript">
 var var1 = document.querySelectorAll("input[type='checkbox']");
 var list1 = document.querySelector("#list1 tbody");
 var stock = document.querySelector("#stock tbody");
 var clickOnClick = function () {
 var list = this.checked ? list1 : stock;
 list.appendChild(this.parentNode.parentNode);
 };
 for (var indice in var1) {
 var1[indice].onclick = clickOnClick;
 }
 </script>

table

【问题讨论】：

你尝试了什么？
欢迎来到 StackOverflow。请通过tour 环顾四周，并阅读HELP center，然后阅读How to 、What types of questions should I avoid asking? 并提供MCVE : Minimal, Complete, and Verifiable Example。如果周围的人可以轻松阅读并理解您的意思或问题所在，他们将更愿意提供帮助:)

标签： javascript jquery html iframe

【解决方案1】：

如果page1.html 和page2.html 共享一个公共域，例如example.com/page1.html 和example.com/page2.html，那么您可以从 iframe 所在的其他页面访问 iframe 中的页面。否则，出于安全考虑，浏览器不允许您访问。您可以参考以下示例代码。您可以在示例中看到，由于跨域安全预防措施，不允许浏览器访问 iframe 的内容。

var iframe = document.getElementById("frame");
var content = (iframe.contentWindow || iframe.contentDocument);
var h1 = document.createElement("h1");
h1.innerText = "Iframe Test";

content.window.document.body.appendChild(h1);

&lt;iframe id="frame"&gt;&lt;/iframe&gt;

【讨论】：