javascript: IFrame-SRC как новое окно?

Question

У меня есть веб-приложение, в котором у меня есть куча iFrame из источника из других инструментов. Теперь пользователь должен иметь возможность открыть содержимое Iframe в новом окне/новой вкладке, нормально я бы просто добавить что-то вроде этого:

function onButtonClick() { var src = $('#iframe').prop('src'); 
windows.open(src, "_blank"); } 

Но его лишь открыть новую версию своего контекста Iframe, например если пользователь открыл страницу в iframe или нажал на что-то, а javascript изменил что-то в моем iframe, пользователь потерял бы это значение.

Итак, могу ли я сделать содержимое iframe в новом окне без потери динамическое состояние веб-сайта в моем iframe?

Answer 1

Вы не можете передвигаться Iframes между различными окнами без перезагрузки, потому что спецификация говорит атрибуты должны быть перепроверены:

Когда IFrame элемент вставляется в документ, который имеет контекст просмотра, агент пользователя должен создать вложенный контекст просмотра, а затем обработать атрибуты iframe для «первого раза».

- https://html.spec.whatwg.org/multipage/embedded-content.html#the-iframe-element

^{(через https://bugzilla.mozilla.org/show_bug.cgi?id=254144#c97)}

---

Старый ответ:

// редактировать: Не работает, как и следовало ожидать, так как IFrame перезагружается на ходу, и исходный src будет восстановлен.

Это достаточно легко, если вы перемещаете IFRAME из текущей страницы:

<button id="example-button">open in new window</button> 

<div id="example-container"> 
    <iframe id="example-iframe" src="https://example.com/"> 
    </iframe> 
</div> 

document.getElementById('example-button').addEventListener('click', function (ev) { 
    ev.preventDefault(); 

    var win = open('about:blank'); 
    var iframe = document.getElementById('example-iframe'); 

    // the popup might not be immediately available: 
    setTimeout(function() { 
     var body = win.document.body; 

     body.style.padding = 0; 
     body.style.margin = 0; 
     body.appendChild(iframe); 

     iframe.style.position = 'fixed'; 
     iframe.style.padding = 0; 
     iframe.style.margin = 0; 
     iframe.style.width = '100%'; 
     iframe.style.height = '100%'; 
     iframe.style.border = 0; 
    }, 0); 

    // move the iframe back if the popup in closed 
    win.addEventListener('beforeunload', function() { 
     document.getElementById('example-container').appendChild(iframe); 

     iframe.style.position = ''; 
     iframe.style.padding = ''; 
     iframe.style.margin = ''; 
     iframe.style.width = ''; 
     iframe.style.height = ''; 
     iframe.style.border = ''; 
    }); 
}); 

Пример: http://jsfiddle.net/cpy2jykv/1/