javascript – Transferring body from a frame to the body of the page itself

Question:

Globally I declare the variable var Frame=null; , then on event I create and fill it with content:

Frame = document.createElement("iframe");
Frame.id = "iframe";
Frame.style.width = "30%";
Frame.style.height = "30%";
Frame.src = targetlink;
document.body.appendChild(Frame);

In it, the user can perform some actions and, accordingly, its content will change.
At some point, the user clicks a button on the main page and the content of the frame should be displayed on the page itself, and the frame should be closed.

Trying to do like this: document.body = Frame.document.body; does not work. How to properly transfer the content of the frame?

Answer:

<button onclick='drag()'>перенести</button>
var Frame = null;

Frame = document.createElement('iframe');
Frame.id = 'iframe';
Frame.style.width = '30%';
Frame.style.height = '30%';
Frame.src = targetlink;
document.body.appendChild(Frame);

function drag() {
    Frame.outerHTML = Frame.contentWindow.document.body.innerHTML;
}

Or you can use getting site content

function drag() {
    getHTML('http://ru.stackoverflow.com', function(html) {
        Frame.outerHTML = html;
    });
}

function getHTML(url, c) {
    request(new XMLHttpRequest());

    function request(xhr) {
        xhr.open('GET', 'https://crossorigin.me/' + url, true);
        xhr.send();
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4 && xhr.status == 200) {
                c(xhr.responseText);
            }
        }
    }
}
Scroll to Top
AllEscort