Question

我的最终目标是复制iframe并将其移至弹出窗口。 iframe包含很多javascript代码，这是我的问题所在。

我可以克隆内容并将其添加到弹出窗口中。

    editWindow = window.open('');

Jquery的

    $(editWindow.document).contents().find('head').parent().replaceWith($('#box').contents().find("html").clone(true));

的Javascript

    var head_inner = window.frames[0].document.getElementsByTagName("head")[0].cloneNode(true);
    var body_inner = window.frames[0].document.getElementsByTagName("body")[0].cloneNode(true);
    var old_head = editWindow.document.getElementsByTagName("head")[0];
    var old_body = editWindow.document.getElementsByTagName("body")[0];
    old_head.parentNode.replaceChild(head_inner, old_head);
    old_body.parentNode.replaceChild(body_inner, old_body);

这两种方法都将内容添加到弹出窗口，但是那里的javascript不可执行。试图在新窗口中调用函数会导致未定义的错误。

我可以获得javascript可执行文件的唯一方法是使用

    editWindow.document.open("text/html", "replace");
    editWindow.document.write('<html>');
    .....
    editWindow.document.close();

然后我可以运行添加到新窗口的代码，但是iframe中的所有javascript变量都不会保留它们的值。

我正在尝试做什么？我找不到任何引用克隆整个页面以及javascript代码的内容。 Google正在通过他们的Gmail聊天做类似的事情，在那里你可以将已经开始的对话弹出到它自己的窗口，然后将其合并回来。

感谢您对此

的任何见解

Answer 1

如果你拥有HTML和JavaScript，有一种方法可以在对象本身上保存状态... t

<div id="testel" data-state="10">This is it</div>

<script>

  var el = document.getElementById("testel");

  // Change state
  el.setAttribute("data-state", "20");

  // Clone the node        
  var el2 = el.cloneNode(true);

  // Add to the document, see the state follows.
  document.getElementsByTagName("body")[0].appendChild(el2);

  // This could also be serialized and sent to another window or frame.
</script>

有关data-*属性的详细信息，请参阅：The HTML5 Doctor

修改

如果您需要来回传递数据，有两种方法：

Post Message

Local Storage

Post Message允许您向[来自该域名]的所有其他窗口发送消息，窗口可以选择并选择他们回复的消息。

需要对LocalStorage进行轮询，但也可以传递信息。有一些包装使它更容易。

是否可以克隆包含javascript和维护状态的内容？

1 个答案: