Question

多年前，我使用很多flash功能构建了我的网站，但是基于html文件。我一直在研究html / css / javascript替代方案，但最后一页卡在了最后。它包括一个带有向后和向前按钮的简单（javascript）幻灯片放映和一个可打开到自定义窗口的可点击图像。在Flash版本中，图像是swf文件，嵌入了以下actionscript：

movieclip_inst.onRelease = function():Void {    
getURL("javascript:openNewWindow('Photopages/A01La_Jolla1.html', 925, 693)");
}

在html文件的头部调用以下javascript函数：

    function openNewWindow(page, width, height) { 
OpenWin = this.open(page, "Illustrationslideshow", "toolbar=no, menubar=no ,location=no, scrollbars=yes, resizable=yes, statusbar=no, width=" + width + ", height=" + height + ", top=" + (screen.height/2 - height/2) + ", left=" + (screen.width/2 - width/2) + "\""); 
}

这将打开外部数组中列出的各个html文件，如下所示：

function setupPages() {
var pages = new Array();

pages[0] = 'Photopages/A01La_Jolla1.html', 925, 690;
pages[1] = 'Photopages/A02La_Jolla2.html', 888, 650;
. . .
return pages;
}

这与Flash版本完美配合，但是当我尝试在html文件的主体中应用该函数时：

<a href="javascript:void()#" onclick="openNewWindow(pages[currentSlideNum])"><img src="images/photosforswfs/La_Jolla_01.jpg" id="artwork" /></a>

它只会调用html图像文件，但不符合我设置的尺寸。根据浏览器的不同，窗口的大小与原始窗口相同，或者作为一个小方块打开。这是在html文档头部设置的pages变量：

var pages = new Array();
pages = setupPages();

该数组还包含图像和标题，设置方式相同：

function setupSlides() {
var slides = new Array();

slides[0] = 'images/photosforswfs/La_Jolla_01.jpg'; 
...
return slides;
}

和

function setupCaptions() {
var captions = new Array();

captions[0] = '<br />Louis Karhn building in La Jolla, CA | 1';
...
return captions;
}

幻灯片放映设置如下：

var slides = new Array();
slides = setupSlides();

var captions = new Array();
captions = setupCaptions();

var currentSlideNum = 0;
var numSlides = slides.length;

function previousSlide() {
   if (currentSlideNum == 0) {
   currentSlideNum = numSlides-1;
   } else {
   currentSlideNum--;
   }
   var slideObj = document.getElementById('artwork');
   slideObj.src = slides[currentSlideNum];
   var captionObj = document.getElementById('caption');
   captionObj.innerHTML = captions[currentSlideNum];
}

function nextSlide() {
if (currentSlideNum == numSlides-1) {
   currentSlideNum = 0;
   } else {
   currentSlideNum++;
   }
   var slideObj = document.getElementById('artwork');
   slideObj.src = slides[currentSlideNum];
   var captionObj = document.getElementById('caption');
   captionObj.innerHTML = captions[currentSlideNum];
    }

我做错了什么？我是一个新手，剪切和粘贴代码，而不是写它。我尝试过的任何东西都无法解决问题。请帮忙！ janeDee

Answer 1

您的页面[0]数组位置仅保存Photopages / A01La_Jolla1.html并返回最后一个值（690）。如果要在pages数组中包含所有数据，可以将其设为对象或其他数组：

pages[0] = ['Photopages/A01La_Jolla1.html', 925, 690];

这样您就可以要求pages[0][1]和pages[0][2]来获取尺寸。

其他方式是使用对象：

pages[0] = {url:'Photopages/A01La_Jolla1.html', w:925, h:690};

这样您就不得不要求：pages[0].w和pages[0].h

当然，最后，您需要更改一下对函数的调用，以指定with pages [0] .w等等，但这很简单。

openNewWindow(pages[0].url, pages[0].w, pages[0].h);

或者您可以发送数组项并让函数从内部提取信息：

function openNewWindow(page) { 
    var OpenWin = window.open(page.url, "Illustrationslideshow", "toolbar=no, menubar=no ,location=no, scrollbars=yes, resizable=yes, statusbar=no, width=" + page.w+ ", height=" + page.h+ ", top=" + (screen.height/2 - height/2) + ", left=" + (screen.width/2 - width/2) + "\""); 
}
openNewWindow(pages[0]);

Answer 2

我使用了描述的对象变体。在外部js文件中，我将现有的pages数组更改为以下内容：

function setupPages() {
var pages = new Array();

pages[0] = {url:'Photopages/A01La_Jolla1.html', w:925, h:690};
pages[1] = {url:'Photopages/A02La_Jolla2.html',  w:688, h:918};
...
return pages;

}

并在链接标记中调用函数，如下所示：

<a href="javascript:void()#" onclick="openNewWindow(pages[currentSlideNum].url, pages[currentSlideNum].w, pages[currentSlideNum].h);">

为什么我的javascript window.open函数会读取url，而不是数组中的width和height参数？

2 个答案: