Javascript 的 Div 高度，使其更快

发布于 2024-11-09 01:50:30 字数 1495 浏览 0 评论 0原文

我有以下脚本来控制带有 ID 的任何元素，在本例中它是带有“包装器”id 的 div：

 window.onload = window.onresize = function ResizeIFrame() {
                var div = document.getElementById("wrapper");
                var myWidth = 0, myHeight = 0;

                if (typeof (window.innerWidth) == 'number') {
                    //Non-IE
                    myWidth = window.innerWidth ;
                    myHeight = window.innerHeight - 90;

                } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                    //IE 6+ in 'standards compliant mode'
                    myWidth = document.documentElement.clientWidth ;
                    myHeight = document.documentElement.clientHeight - 90 ;
                } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
                    //IE 4 compatible
                    myWidth = document.body.clientWidth;
                    myHeight = document.body.clientHeight - 90;
                }
                div.style.width = myWidth + 'px';
                div.style.height = myHeight + 'px';
            }

在此 Web 中，您可以看到它是如何工作的： http://www.jmquintela.cl/?page_id=145 问题是脚本等待页面完全加载才能运行函数并调整窗口大小，或者等到用户手动调整窗口大小。但是页面的加载可能需要很长时间，我希望脚本在窗口完全加载之前自行执行，以便用户可以在中间导航。我尝试像这样调用该函数，但不起作用：

    ResizeIFrame()

请帮忙！再见！

原文

I have the Following script to control any element with a ID, in this case it's a div with a "wrapper" id:

 window.onload = window.onresize = function ResizeIFrame() {
                var div = document.getElementById("wrapper");
                var myWidth = 0, myHeight = 0;

                if (typeof (window.innerWidth) == 'number') {
                    //Non-IE
                    myWidth = window.innerWidth ;
                    myHeight = window.innerHeight - 90;

                } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                    //IE 6+ in 'standards compliant mode'
                    myWidth = document.documentElement.clientWidth ;
                    myHeight = document.documentElement.clientHeight - 90 ;
                } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
                    //IE 4 compatible
                    myWidth = document.body.clientWidth;
                    myHeight = document.body.clientHeight - 90;
                }
                div.style.width = myWidth + 'px';
                div.style.height = myHeight + 'px';
            }

In this web you could see how it's working: http://www.jmquintela.cl/?page_id=145
the problem is that the script waits for the page to be fully loaded to run the function and resize the window, or waits until the user resize the window manually.
But the loading of the page could take too long some time and I want that the script execute itself before the window is fully loaded so the users can navigate in the mid-time.
I try to call the function like this, but doesn't work:


    ResizeIFrame()

help please!
bye!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

树深时见影 2024-11-16 01:50:30

window.onload 在所有图像和 iframe 完成加载之前不会触发，这就是为什么所有主要 JS 库都会尝试识别 DOM 何时准备好进行操作，这通常会发生得更早。如果您不使用/不想使用这些库之一，这里有一个非常轻量级的跨浏览器 DOM 就绪助手：

回复收藏 0 原文

遥远的绿洲 2024-11-16 01:50:30

试试这个：

 function ResizeIFrame() {
            var div = document.getElementById("wrapper");
            var myWidth = 0, myHeight = 0;

            if (typeof (window.innerWidth) == 'number') {
                //Non-IE
                myWidth = window.innerWidth ;
                myHeight = window.innerHeight - 90;

            } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                //IE 6+ in 'standards compliant mode'
                myWidth = document.documentElement.clientWidth ;
                myHeight = document.documentElement.clientHeight - 90 ;
            } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
                //IE 4 compatible
                myWidth = document.body.clientWidth;
                myHeight = document.body.clientHeight - 90;
            }
            div.style.width = myWidth + 'px';
            div.style.height = myHeight + 'px';
        }  

window.onload = window.onresize =  ResizeIFrame;

//Then you can just do:
ResizeIFrame(); //whenever you desire

Try this:

 function ResizeIFrame() {
            var div = document.getElementById("wrapper");
            var myWidth = 0, myHeight = 0;

            if (typeof (window.innerWidth) == 'number') {
                //Non-IE
                myWidth = window.innerWidth ;
                myHeight = window.innerHeight - 90;

            } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                //IE 6+ in 'standards compliant mode'
                myWidth = document.documentElement.clientWidth ;
                myHeight = document.documentElement.clientHeight - 90 ;
            } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
                //IE 4 compatible
                myWidth = document.body.clientWidth;
                myHeight = document.body.clientHeight - 90;
            }
            div.style.width = myWidth + 'px';
            div.style.height = myHeight + 'px';
        }  

window.onload = window.onresize =  ResizeIFrame;

//Then you can just do:
ResizeIFrame(); //whenever you desire

回复收藏 0 原文

~没有更多了~