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共享一个公共域，例如example.com/page1.html和example.com/page2.html，那么您可以从其他页面访问该页面的iframe iframe居住。否则，浏览器不允许您访问以获取安全预防措施。您可以参考以下示例代码。您可以在示例中看到，由于跨域安全预防措施，不允许浏览器访问iframe的内容。

＆＃13;

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);

＆＃13;

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

＆＃13;

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

1 个答案: