Saving an element's document model with JSON

Question

I have written some code that allows one element on a page to be expanded to full screen and contracted back to its original size. This code works by saving the states of other elements on the page, altering their properties, and restoring them. This change has to survive a postback, so I'm attempting to use JSON and a hidden input element to preserve the state changes.

The element in question is nested within multiple IFRAMEs. Thus I have to save the document model in which the element resides. However, this causes the JSON conversion to choke. I need a way to resolve this problem that can be easily converted to JSON and back.

Here is the pertinent code:

// e.uniqueID : A unique identifer for the object.
// e.doc: The document model to which the element belongs (so we can find it later).
// e.style: The original style of the element.

function my_preserveElement(gn,elem)
{
    if (elem == null) return;
    if (elem.style == null) return;
    if (elem.id == '') elem.id = PseudoGuid.GetNew();
    var e = new Object();
    e.uniqueID = elem.id;
    e.doc = elem.document;
    var cssString;
    cssString = elem.style.cssText;
    if( typeof(cssString) != 'string' ) { cssString = elem.getAttribute('style'); }
    e.style = cssString;
    me_aObjectStore[gn][me_aObjectStore[gn].length] = e;
}

function my_restoreElements(gn)
{
    for (i = 0; i < me_aObjectStore[gn].length; i++)
    {
        var e = me_aObjectStore[gn][i];
        var elem = e.doc.getElementById(e.uniqueID);
        elem.style.cssText = e.style;
        elem.setAttribute('style',e.style);
    }
    me_aObjectStore[gn] = null;
}

This other thread may help you figure out some things: http://stackoverflow.com/questions/1004475/jquery-css-plugin-that-returns-computed-style-of-element-to-pseudo-clone-that-el/2155757#2155757 — Quickredfox, May 03 '13 at 15:49

score 0 · Answer 1 · answered May 03 '13 at 19:26

Discovered that since the code in question is running in the innermost frame, I need only walk up the frame tree, searching each level for each element by ID. The restore function becomes as follows, and there is no need to keep track of each element's location (just its unique ID).

function my_restoreElements(gn)
{
    for (i = 0; i < my_aObjectStore[gn].length; i++)
    {
        var e = my_aObjectStore[gn][i];

        // Find the element in this window or one of its parents.
        // Because we need to check the top level frame and w.parent == w.self for that frame, 
        // we use the number of counts to keep the loop from being endless.
        var w = window;
        var elem = null;
        var count = 0; 
        do {
            elem = w.document.getElementById(e.uniqueID);
            w = w.parent; 
            count++;
        } while ((elem == null) && (count < 3))
        if (elem != null) {
            elem.style.cssText = e.style;
            elem.setAttribute('style',e.style);
        }
    } //for
    my_aObjectStore[gn] = null;
}

Note that I explicitly walk up only three levels. That's because in my specific case, the frames are that few levels deep. Other applications that can use this solution may need a deeper depth.

Saving an element's document model with JSON

1 Answers1