1

I am trying to make a copy of a page in its existing state, launch it in a new window, and have the listeners remain functional. Ultimately, I want to clone a portion of the page only, but for now I'm just trying to get it to work with the entire page.

I have the following function:

function clonePage() {
    var printWindow = window.open(''),
        html = $('html').clone(true, true);

    printWindow.document.write("<!DOCTYPE html><html><head></head><body></body></html>");

    $(printWindow.document).find('html').replaceWith(html);
}

What happens when I run this is if I click on something with a listener in the new window it affects the page in the old window.

I created a codepen to exemplify the problem. If you click on the Clone Me button and then the Alert button on the new window, the alert is displayed on the parent window.

http://codepen.io/MerceanCoconut/pen/BKEJi

Chris Purves
  • 399
  • 4
  • 16
  • That's interesting (+1), but I can't see the usecase for this. – Johnny5 May 29 '14 at 17:27
  • @Johnny5, I have a page with several divs, one of which will have loaded some data from a database into a table or multiple tables. I have a button that acts as a toggle to convert a table into a Google Chart and back again. I'm also using the tablesorter plugin on the table, so the data can be re-ordered. Because the div can be quite small, especially on small screens, I want to allow the user to launch that div into a new window but still be able to toggle between table and chart and sort the table. – Chris Purves May 30 '14 at 09:42

1 Answers1

0

Edit

Try (at console, this page)

var _jq = "http://code.jquery.com/jquery-1.11.1.min.js";
var _div = $("#answer-23937038").get(0).outerHTML; // target `div`
// if `event` `listeners` and `plugin` pieces are in file, 
// utilize same approach as jquery, i.e.g,
// `<script src=" + _eventListenersFileSrc + ">`,
// else, compose script(s) as `string`(s), 
// and escape quotes, .e.g, `\"`
var _script = "<script>$(function() { $(\"#answer-23937038\").on(\"click\"," 
              + "function(e) { alert($(e.target).text()) })})</script>";
$("<a>", { 
  "href" : "data:text/html;charset=utf-8,<!DOCTYPE html><html><head><script src=" 
           + _jq + "></script>"
           + _script
           + "</head><body>" 
           + _div 
           + "</body></html>",
  "target" : "_blank", 
  "html" : "view data in new tab"})
.appendTo($("body"));
guest271314
  • 1
  • 15
  • 104
  • 177
  • That removes the listeners completely. – Chris Purves May 29 '14 at 16:09
  • Try at `console`, this page. Is `js` pulled from file ? Try with `js` composed within `` elements. – guest271314 May 29 '14 at 16:51
  • I tried previously with an alert statement within on the page and it doesn't run on the new window. I re-confirmed using the codepen I just added to my original question. – Chris Purves May 29 '14 at 17:25
  • See https://developer.mozilla.org/en-US/docs/Web/API/Window.opener , http://stackoverflow.com/questions/11313045/when-to-use-window-opener-window-parent-window-top. Tried to utilize pieces at original post for Answer, yet another apporach may be to utilize `data-uri` or `blob` as `a` element `href`, instead of `window.open`. See also http://stackoverflow.com/questions/2725188/why-is-window-not-identical-to-window-self-in-internet-explorer http://stackoverflow.com/questions/3638887/whats-the-difference-between-self-and-window , http://www.java2s.com/Tutorial/JavaScript/0380__Window/Window.htm – guest271314 May 30 '14 at 01:02
  • I don't see where you're going with this. I don't think I can preserve the javascript listeners with what I think you are suggesting. – Chris Purves May 30 '14 at 10:14