简体   繁体   English

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

[英]Move content table from iframe to another table outside iframe

I would like to move content of the table in iframe to another table outside iframe and vice versa, just clicking on checkbox. 我想将iframe中的表格内容移动到iframe之外的另一个表格中,反之亦然,只需单击复选框即可。

I have page1.html and page2.html 我有page1.html和page2.html

Here the first code without iframe 这是没有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

If page1.html and page2.html share a common domain such as example.com/page1.html and example.com/page2.html , then you can access to the page is in the iframe from the other page on which iframe resides. 如果page1.htmlpage2.html共享一个公共域,例如example.com/page1.htmlexample.com/page2.html ,则可以从iframe所在的其他页面访问iframe中的页面。 Otherwise you are not allowed access by the browser for security precautions. 否则,为了安全起见,浏览器将不允许您访问。 You can refer to following example code. 您可以参考以下示例代码。 You can see in the example that browser is not allowed to access the iframe's contents because of cross-origin security precautions. 在示例中,您可以看到由于跨域安全预防措施,不允许浏览器访问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> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM