使用JSON保存元素的文档模型

时间:2013-05-03 15:43:42

标签: javascript json stringify

我编写了一些代码,允许页面上的一个元素扩展到全屏并缩小回原始大小。此代码的工作原理是保存页面上其他元素的状态,更改其属性以及还原它们。此更改必须在回发后继续存在,因此我尝试使用JSON和隐藏的输入元素来保留状态更改。

有问题的元素嵌套在多个IFRAME中。因此,我必须保存元素所在的文档模型。但是,这会导致JSON转换阻塞。我需要一种方法来解决这个问题,可以很容易地转换为JSON并返回。

以下是相关代码:

// 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;
}

1 个答案:

答案 0 :(得分:0)

发现由于有问题的代码在最里面的框架中运行,我只需要走向框架树,按ID搜索每个元素的每个级别。恢复功能如下所示,无需跟踪每个元素的位置(只是其唯一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;
}

请注意,我只明确地走了三个级别。那是因为在我的具体案例中,框架的深度很少。其他可以使用此解决方案的应用程序可能需要更深入的深度。