欢迎访问 生活随笔!

生活随笔

当前位置: 首页 > 前端技术 > HTML >内容正文

HTML

body onload 控制窗口大小 html,如何实现在调整浏览器窗口大小时缩放的网页?

发布时间:2023/12/1 HTML 45 豆豆
生活随笔 收集整理的这篇文章主要介绍了 body onload 控制窗口大小 html,如何实现在调整浏览器窗口大小时缩放的网页? 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

感谢所有的建议!看起来我必须做的丑陋的东西是必要的。以下工作(在我的机器上,无论如何)在IE和FireFox中。我稍后可以为CodeProject.com制作一篇文章; - )

这个javascript进入< head>部分:

var tmout = null;

var mustReload = false;

function Resizing()

{

if (tmout != null)

{

clearTimeout(tmout);

}

tmout = setTimeout(RefreshAll,300);

}

function Reload()

{

document.location.href = document.location.href;

}

//IE fires the window's onresize event when the client area

//expands or contracts, which causes an infinite loop.

//the way around this is a hidden div set to 100% of

//height and width, with a guard around the resize event

//handler to see if the _window_ size really changed

var windowHeight;

var windowWidth;

window.onresize = null;

window.onresize = function()

{

var backdropDiv = document.getElementById("divBackdrop");

if (windowHeight != backdropDiv.offsetHeight ||

windowWidth != backdropDiv.offsetWidth)

{

//if screen is shrinking, must reload to get correct sizes

if (windowHeight != backdropDiv.offsetHeight ||

windowWidth != backdropDiv.offsetWidth)

{

mustReload = true;

}

else

{

mustReload = mustReload || false;

}

windowHeight = backdropDiv.offsetHeight;

windowWidth = backdropDiv.offsetWidth;

Resizing();

}

}

< body>像这样开始:

style="width:100%; clear:both; height: 100%; margin: 0;

padding: 0; position:absolute; top:0px; left:0px;

visibility:hidden; z-index:0;">

DIV向左浮动以进行布局。我必须将高度和宽度设置为完全量(例如,99.99%,59.99%,39.99%)的百分比,以防止浮动包裹,可能是由于DIV上的边界。

最后,在内容部分之后,另一个javascript块来管理刷新:

var isWorking = false;

var currentEntity = ;

//try to detect a bad back-button usage;

//if the current entity id does not match the querystring

//parameter entityid=###

if (location.search != null && location.search.indexOf("&entityid=") > 0)

{

var urlId = location.search.substring(

location.search.indexOf("&entityid=")+10);

if (urlId.indexOf("&") > 0)

{

urlId = urlId.substring(0,urlId.indexOf("&"));

}

if (currentEntity != urlId)

{

mustReload = true;

}

}

//a friendly please wait... hidden div

var pleaseWaitDiv = document.getElementById("divPleaseWait");

//an example content div being refreshed via AJAX PRO

var contentDiv = document.getElementById("contentDiv");

//synchronous refresh of content

function RefreshAll()

{

if (isWorking) { return; } //no infinite recursion please!

isWorking = true;

pleaseWaitDiv.style.visibility = "visible";

if (mustReload)

{

Reload();

}

else

{

contentDiv.innerHTML = NAMESPACE.REFRESH_METHOD(

(currentEntity, contentDiv.offsetWidth,

contentDiv.offsetHeight).value;

}

pleaseWaitDiv.style.visibility = "hidden";

isWorking = false;

if (tmout != null)

{

clearTimeout(tmout);

}

}

var tmout2 = null;

var refreshInterval = 60000;

//periodic synchronous refresh of all content

function Refreshing()

{

RefreshAll();

if (tmout2 != null)

{

clearTimeout(tmout2);

tmout2 = setTimeout(Refreshing,refreshInterval);

}

}

//start periodic refresh of content

tmout2 = setTimeout(Refreshing,refreshInterval);

//clean up

window.onunload = function()

{

isWorking = true;

if (tmout != null)

{

clearTimeout(tmout);

tmout = null;

}

if (tmout2 != null)

{

clearTimeout(tmout2);

tmout2 = null;

}

很丑,但它确实有效 - 我猜它真正重要; - )

总结

以上是生活随笔为你收集整理的body onload 控制窗口大小 html,如何实现在调整浏览器窗口大小时缩放的网页?的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。