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