Move content table from iframe to another table outside iframe

Question

I would like to move content of the table in iframe to another table outside iframe and vice versa, just clicking on checkbox.

I have page1.html and page2.html

Here the first code without 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

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. 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.

 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>