包含createElement后,javascript setTimeout停止工作

时间:2013-04-30 15:11:01

标签: javascript jquery settimeout innerhtml createelement

我正在尝试在我的网站上添加新幻灯片。幻灯片显示我需要的一切,除了“height =”80%“”的选项,即我希望幻灯片可以与浏览器一起扩展,因为新的网站设计将像Android应用程序一样排序;完全身临其境。

由于幻灯片本身没有此选项,我正在创建一个javascript代码,它将每2秒检查一次文档/浏览器窗口大小,并重新加载/调整幻灯片本身的大小,使其始终适合屏幕。但是,问题是javascript只运行一次,onload,并且在我将一段代码粘贴到脚本后不会调用“setTimeout”。

所以,问题是setTimeout实际上是STOPS正常工作,所以在我包含这段代码之后它已经工作了:

var thescript = document.createElement("script");
thescript.type = "text/javascript";
thescript.innerHTML="jQuery.flashgallery('gallery/ArtGallery.swf', 'gallery/gallery.xml', {width: '100%', height: '"+calcheight+"px', background: '#000000'});";
document.getElementById('galleryid').appendChild(thescript);

完整的javascript检查功能在这里:

function getDocSpecs() {

    clearTimeout(t);
    var D = Math.max(
        Math.max(document.body.scrollHeight, document.documentElement.scrollHeight),
        Math.max(document.body.offsetHeight, document.documentElement.offsetHeight),
        Math.max(document.body.clientHeight, document.documentElement.clientHeight));

    var Le = Math.max(
        Math.max(document.body.scrollWidth, document.documentElement.scrollWidth),
        Math.max(document.body.offsetWidth, document.documentElement.offsetWidth),
        Math.max(document.body.clientWidth, document.documentElement.clientWidth));

    calcheight = (0.80 * D);
    alert(preheight + "_" + prewidth + "_" + D + "_" + Le + "_");
    if (preheight != D || prewidth != Le) {

        var thescript = document.createElement("script");
        thescript.type = "text/javascript";
        thescript.innerHTML = "jQuery.flashgallery('gallery/ArtGallery.swf', 'gallery/gallery.xml', {width: '100%', height: '" + calcheight + "px', background: '#000000'});";
        document.getElementById('galleryid').appendChild(thescript);
    }


    preheight = D;
    prewidth = Le;

    t = setTimeout('getDocSpecs()', 2000);
}

这两个似乎彼此不喜欢:

var thescript = document.createElement("script");
thescript.type = "text/javascript";
thescript.innerHTML="jQuery.flashgallery('gallery/ArtGallery.swf', 'gallery/gallery.xml', {width: '100%', height: '"+calcheight+"px', background: '#000000'});";
document.getElementById('galleryid').appendChild(thescript);

t = setTimeout('getDocSpecs()', 2000);

我试图通过首先加载幻灯片然后调用该函数,添加单击激活的文本,调用多个函数等来欺骗它。

1 个答案:

答案 0 :(得分:1)

这两者不应该相互影响,但与此同时,你不应该使用createElement来做你想做的事。

我已将它整理了一点,分成了清晰的功能并删除了createElement部分。希望您现在能够更轻松地进行调试。不过,我试图保持这种行为不变 正如评论中所提到的,您还可以更改为使用 resize 的事件侦听器,这将使函数不必经常被调用。

var getDocSpecs = (function () {
    var t,
        pre = {h: -1, w: -1},
        getDocSpecs;

    function asyncFlashGallery(p1, p2, p3) {
        return window.setTimeout(function () {jQuery.flashgallery(p1, p2, p3)}, 0);
    }

    function dMax(nx) {
        return Math.max(document.body[nx] || 0, document.documentElement[nx] || 0);
    }

    getDocSpecs = function getDocSpecs() {
        window.clearTimeout(t);
        var D = Math.max(
                dMax('scrollHeight'), dMax('offsetHeight'), dMax('clientHeight')
            ),
            Le = Math.max(
                dMax('scrollWidth'), dMax('offsetWidth'), dMax('clientWidth')
            ),
            calcheight = (0.80 * D);

        alert(pre.h + "_" + pre.w + "_" + D + "_" + Le + "_"); // consider console.log
        if (pre.h !== D || pre.w !== Le) {
            asyncFlashGallery(
                'gallery/ArtGallery.swf',
                'gallery/gallery.xml',
                "{width: '100%', height: '" + calcheight + "px', background: '#000000'}"
            );
        }

        pre.h = D;
        pre.w = Le;

        t = window.setTimeout(getDocSpecs, 2000);
    };
    getDocSpecs.CANCEL = function () {window.clearTimeout(t);}
    return getDocSpecs;
}());