javascript - 将内容表从 iframe 移动到 iframe 外的另一个表

Question

我想将 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

Answer 1

如果 page1.html 和 page2.html 共享一个公共(public)域，例如 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);

<iframe id="frame"></iframe>