1

Is there a way to move the entire dom (javascript state, document state, everything) from one document to another?

My first thought was to use an iframe but apparently you can't move the iframe around the dom without it reloading.

My second thought was to do a deep copy of the window object, but obviously that is time consuming, has many pitfalls, and doesn't handle the dom state.

Is it possible to do this? I basically want to sandbox one document and then move/copy it's state to another document.

FYI it's a node-webkit app. I want to copy the dom from one window into another window.

For example can I do:

window2.document = window1.document; window2.document.body.innerHtml( window1.document.body ); //dont know the syntax

Paul Nispel
  • 731
  • 6
  • 10

2 Answers2

0

Nope, HTTP is a stateless protocol so moving states between HTML documents doesn't make much sense.

I recommend looking into a single page app. Let a single HTML document deal with state. Then make AJAX request to partially update data as needed.

beautifulcoder
  • 10,832
  • 3
  • 19
  • 29
  • Can you look at my edits? It's the last 4 lines. I've thought about storing the entire state in `localStorage` or something similar, but I'd much rather just be able to copy everything over so I don't have to worry about things like form data that is partially filled out and such. – Paul Nispel May 07 '14 at 06:26
0

You could store the entire page as json in a cookie. If the page is too big, you might have to use multiple cookies. Then on the next document load the page nad whatever values you need. Here's some javascript I've used before to do this. It will loop through each element in the form and save it to a cookie as json with a format of controlId:controlValue.

    function SaveFormInCookies(formId) {
    var saveToCookies = {};
    $('#' + formId + ' :input').each(function () {
        if ($(this).is(':visible')) { // Only save visible form items
            if (($(this).val().length > 0) && ($(this).is(':input[type="submit"]') == false)) {
                saveToCookies[$(this).attr('id')] = $(this).attr('value');
            }
        }
    });
    var elementsToSave = JSON.stringify(saveToCookies); // Convert object array of controls and values into a json string
    var splitForm = elementsToSave.match(/.{1,3000}/g); // Make sure each cookie only hold up 3000 characters. Leave plenty of overhead as cookie size varies depending on browser
    for (var i = 0; i < splitForm.length; i++) {
        setCookie("MGIncForm" + i, splitForm[i], 1); // Save as many cookies as needed
    }
}

/*
This function is resposible for actually saving the cookies
*/
function setCookie(cookieName, value, expireHours) {
    var exdate = new Date().addHours(expireHours);
    var cookieValue = escape(value) + ((expireHours == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = cookieName + "=" + cookieValue;
}

On the next page, check if the cookie exists and de-serialize it.

garethb
  • 3,951
  • 6
  • 32
  • 52
  • Say that I do `window.foo = 4;` I'd like something that when I copy/move the document it would still have that along with things like scroll location etc. That's why moving an iframe is ideal, because it's sandboxed and all of the state (javascript and dom as well) is self-contained. Sadly I don't think serializing the entire window object is something that would work for what I'm trying to do. Thanks for the answer though. – Paul Nispel May 07 '14 at 06:29
  • You could store scroll location and anything else as a variable and move it to the next page in cookies? I mean you'd have to know exactly what you set and want to keep and then set the values again on the other page to match. – garethb May 07 '14 at 06:49
  • Right. I was hoping there was a more elegant solution. I'll try it out. – Paul Nispel May 07 '14 at 06:51
  • Just found another post that talks about the same - might help as well http://stackoverflow.com/q/9652070/853295. That Lawnchair plugin someone linked looks promising! – garethb May 07 '14 at 06:52
  • I... I think you just linked back to this question :P – Paul Nispel May 07 '14 at 06:53