如果您是必须处理图像库的网站管理员，请记下这个聪明的脚本。 它为您解决了一个非常常见的问题，即如何调整弹出窗口的大小以适合其中显示的图像大小。 该脚本适用于NS 4/5/6/7和IE 4/5/6。
首先，您需要一个主HTML页面，其中包含指向图库中全尺寸图片的链接：
<HTML>
<HEAD>
<TITLE>The Image Gallery</TITLE>
<script language="Javascript">
function PopupPic(sPicURL) {
window.open( "popup.htm?"+sPicURL, "",
"resizable=1,HEIGHT=200,WIDTH=200");
}
</script>
</HEAD>
<BODY bgcolor="#FFFFFF">
<a href="javascript:PopupPic('Image1.gif')">Image 1</a><br>
<a href="javascript:PopupPic('Image2.gif')">Image 2</a><br>
<a href="javascript:PopupPic('Image3.gif')">Image 3</a><br>
</BODY>
</HTML> 让我们研究一下上面的代码。 我们有一个简单的HTML页面，其中包含几个链接，并定义了一个简单的Javascript函数： PopupPic() 。 通过单击此页面上的任何链接，您将调用PopupPic()函数。 该功能非常简单：唯一要做的就是创建一个弹出浏览器窗口，并在其中加载popup.htm页面。
技巧是在创建弹出窗口时，在查询字符串中传递图像的URL（相对于图像库Web页面位置）：
window.open( "popup.htm?"+sPicURL, "",
"resizable=1,HEIGHT=200,WIDTH=200");现在，看一下popup.htm页面的代码：
<HTML>
<HEAD>
<TITLE>Fit the Pic Script</TITLE>
<script language='javascript'>
var arrTemp=self.location.href.split("?");
var picUrl = (arrTemp.length>0)?arrTemp[1]:"";
var NS = (navigator.appName=="Netscape")?true:false;
function FitPic() {
iWidth = (NS)?window.innerWidth:document.body.clientWidth;
iHeight = (NS)?window.innerHeight:document.body.clientHeight;
iWidth = document.images[0].width - iWidth;
iHeight = document.images[0].height - iHeight;
window.resizeBy(iWidth, iHeight);
self.focus();
};
</script>
</HEAD>
<BODY bgcolor="#000000" onload='FitPic();' topmargin="0"
marginheight="0" leftmargin="0" marginwidth="0">
<script language='javascript'>
document.write( "<img src='" + picUrl + "' border=0>" );
</script>
</BODY>
</HTML>首先要引起我们注意的是，我们正在使用Javascript代码，该代码在页面加载时直接执行：
var arrTemp=self.location.href.split("?");
var picUrl = (arrTemp[1].length>0)?arrTemp[1]:"";
var NS = (navigator.appName=="Netscape")?true:false; 首先，我们获取页面URL字符串，并用“ ? ”字符将其分割。 拆分的结果保存在arrTemp数组变量中。
在第二行，我们检查临时数组的第二个元素arrTemp[1]长度是否大于0，如果为true，则将第二个数组元素的值分配给picURL变量。
第三行，如果浏览器为Netscape，则将NS变量指定为true，否则将其指定为false。 您可能已经猜到了， PicURL变量包含将在popup.htm页面中显示的图片的相对URL。
有了PicURL变量后，我们可以使用document.write轻松地将图像写入文档主体：
document.write( "<img src='" + picUrl + "' border=0>" ); 在将页面完全加载到浏览器中之后，将触发Load事件，并且由于我们使用了onLoad事件处理程序，因此会调用FitPic()函数。 此函数的前两行查找浏览器的窗口宽度和高度（取决于浏览器）。 但是，接下来的3行是此功能中最重要的行。 让我们来看看它们：
iWidth = document.images[0].width - iWidth;
iHeight = document.images[0].height - iHeight;
window.resizeBy(iWidth, iHeight); 页面完全加载后，我们可以访问文档的图像集合，从而可以访问图像属性。 因为页面上只有一个图像，并且图像集合是基于零的，所以可以使用document.images[0]访问该图像-这样，我们就可以获取图像的宽度和高度。
然后，我们从实际图像宽度中减去初始浏览器宽度-结果是一个数字，必须调整浏览器宽度的大小。 我们对初始浏览器高度和实际图像高度执行相同的操作，以确定为了调整图片尺寸而应调整浏览器高度的像素数。
第三行是JavaScript的resizeBy()函数内置的实际大小调整。 如果您不熟悉resizeBy()函数，这里有一个简短的解释。
根据定义，此函数将当前浏览器窗口的大小调整一定量。 它带有2个参数： window.resizeBy(X, Y):
- X –水平增加窗口的像素数
- Y –垂直增加窗口的像素数
以下代码行将窗口的宽度缩小了10px，将其高度扩大了13px：
window.resizeBy(-10, +13); FitPic()函数的最后一行将焦点放在弹出窗口上。
因此，为总结脚本的工作原理，我们将图像相对URL传递给popup.htm（popup.htm？Images / Image1.gif），然后使用document.write将image标记写入页面主体，当页面加载时，我们调用FitPic() ，它将浏览器窗口的大小调整为图像大小。
要查看运行中的脚本， 请单击此处 。
From: https://www.sitepoint.com/resize-popup-fit-images-size/
扫一扫
136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
