I am unable to get a javascript popup (initiated by an onclick event) to load multiple "random" images when the popup loads. My code is below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="ISO-8859-1">
<title>Popup w/ Multiple Images - Test</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<html>
<body>
<head>
<script language="JavaScript">
var w = 480, h = 340;
function openWindow() {
if (document.getElementById) {
w = screen.availWidth;
h = screen.availHeight;
}
var popwidth = 800, popheight = 700;
var leftPos = (w-popwidth)/2;
var topPos = (h-popheight)/2;
msgWindow = window.open('','popup','width=' + popwidth + ',height=' +
popheight +
',top=' + topPos + ',left=' + leftPos + ', scrollbars=yes');
msgWindow.document.write
('<html><head>' +
'<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">' +
'<meta http-equiv="Content-Style-Type" content="text/css">' +
'<meta http-equiv="Content-Script-Type" content="text/javascript">' +
'<title>Popup w/ Multiple Images - Test</title>' +
'<style type="text/css">' +
'img {' +
'border:0;' +
'}' +
'</style>' +
'<script type="text/javascript">' +
'var linksNumber = 6;' +
'var myimages = [' +
'["docURL"]' +
'["docURL"]' +
'["docURL"]' +
'["docURL"]' +
'["docURL"]' +
'["docURL"]' +
'["docURL"],' +
'["docURL"],' +
'["docURL"],' +
'["docURL"],' +
'["docURL"]];' +
'var imagelinks = [' +
'["imgURL"],' +
'["imgURL "],' +
'["imgURL "],' +
'["imgURL "],' +
'["imgURL "],' +
'["imgURL "],' +
'["imgURL "],' +
'["imgURL "],' +
'["imgURL "],' +
'["imgURL "],' +
'["imgURL "],' +
'["imgURL "]];' +
'var ary0 = [];' +
'var ary1 = [];' +
'var k = 0' +
'var c, n;' +
'function randomImgDisplay() {' +
'for(c = 0; c < myimages.length; c++) {' +
'ary0[c] = c;' +
'}' +
'while(ary0.length > 0) {' +
'n = Math.floor(Math.random()*ary0.length);' +
'ary1[k] = ary0[n];' +
'k++;' +
'ary0.splice(n,1);' +
'}' +
'for(c = 0; c < linksNumber; c++) {' +
'document.getElementById("pic"+ c).src=myimages[ary1[c]];' +
'document.getElementById("lnk"+ c).href=imagelinks[ary1[c]];' +
'}' +
'}' +
'if (window.addEventListener) {' +
'window.addEventListener("load",randomImgDisplay,false);' +
'}' +
'else {' +
'if (window.attachEvent) {' +
'window.attachEvent("onload",randomImgDisplay);' +
'}' +
'}' +
'<\/script>' +
'</head><body>' +
'<div>' +
'<a id="lnk0" href="lnk0"><img id="pic0" src="img0" alt=""></a>' +
'<a id="lnk1" href="lnk1"><img id="pic1" src="img1" alt=""></a>' +
'<a id="lnk2" href="lnk2"><img id="pic2" src="img2" alt=""></a>' +
'<a id="lnk3" href="lnk3"><img id="pic3" src="img3" alt=""></a>' +
'<a id="lnk4" href="lnk4"><img id="pic4" src="img4" alt=""></a>' +
'<a id="lnk5" href="lnk5"><img id="pic5" src="img5" alt=""></a>' +
'</div>' +
'<form name="OnClickPopup">' +
'<br/>' +
'<input type="button" value="Close" onClick="window.close
();"></form></body></html>');
</script>
<form>
<input type="button" onClick="openWindow()" value="Click Me">
</form>
</body>
</html>
When I separate the code into two javascript files, one to create the popup & one to display multiple random images, they each work fine. I am grasping at straws and thinking it may be my use of "msgWindow.document.write" that is causing my issue, please help if you are able.
Aucun commentaire:
Enregistrer un commentaire