Using array element in child window to change image in parent window with getElementById_问答_开发者

Using array element in child window to change image in parent window with getElementById

开发者 https://www.devze.com 2022-12-19 06:01 出处：网络

So I\'m trying to complete some javascript and having trouble codein开发者_JAVA百科g linksto update a image. In a parent window using my script I open a remote child window to operate the image. THe l

相关专题：javascript

So I'm trying to complete some javascript and having trouble codein开发者_JAVA百科g links to update a image. In a parent window using my script I open a remote child window to operate the image. THe links on the child window open the first image and last image. Two more links control the "next" image and previous image.

Heres what I have so far

HTML PARENT WINDOW : (haven't figured out how to post html on here btw :( )

<html>
    <head>
    <title> </title>
    <script type="text/javascript" src="scriptss.js">
    </script>
    </head>
    <body>
    <img src="images/img0.jpg" width="200px" height="200px" id="myImage"        name="myImage" /></img>
    <h1>XXX</h1>
    <a href="#"  id = "opens" >open</a>
    </br>
    <a href="#" id="closes">close</a>
    </br>
    </body>
    <html>

Child Window HTML:

<html>
<head>
    <title> Matt Beckley Assignment Remote</title>
    <link rel="stylesheet" type="text/css" href="remote.css" />
<script type="text/javascript" src="scriptss.js">
</script>
</head>
     <body>
     <h1>My Remote</h1>
     <a href="#" id="first" onclick="first()">First Image</a>
     </br>
     <a href="#" id="next">Next Image</a>
     </br>
     <a href="#" id="previous">Previous Image</a>
     </br>
     <a href="#" id="last">Last Image</a>
     </br>
     <a href="#" id="closess">close</a>
     </body>
  </html>

JAVASCRIPT child node

  var newWindow = null;
  window.onload = init;
  var myImages = new Array();

  //start loop - length depends on how many images you need to preload
  for (var i=0; i<5; i++) {
    //create new image object
    var tempImage = new Image();
    //assign name|path of image to src property of image object
    tempImage.src = "img" + (i+1) + ".jpg";
    }


function init()
{
for(var i=0; i<document.links.length; i++)
{
document.links[i].onclick = changeWindowState;
}

}

function windowOpen(){
if(newWindow && !newWindow.closed){
    return true;
}
return false;
}


function changeWindowState()
{
if (this.id =="closes")
{
    if(windowOpen())
    {
        newWindow.close();
    }
    else
    {
        alert("The window isn't open");
    }
}
if (this.id =="closess")
{
    if(windowOpen())
    {
        remotetest.html.close();
    }
    else
    {
        alert("The window isn't open");
    }
}
if(this.id == "opens")
{
    if(windowOpen())
    {
        alert("The Window is alreadyopen!");
    }
    else
    {
    newWindow = window.open ("remotetest.html","remoteWin","resizeable=no,width=200,height=200");
    }
}
return false;
}



function first()
{
if(this.id == "first")
{
alert("box");
}
else(this.id == "first") 

{
alert("box");

}
}

Anyways I'm preloading my images and I got that figured out correctly. I'm trying to access my element in the parent node in the image tag and display an array element 1-6. In other words image 1 thru image 6 THe idea is to press a button in the child node and display the first image element[0] for instand press another button element[5] or press another button for next element[i+1] with an another button. THanks for the help.

There are quite some ways on how to communicate between parent and child window. See this for more info.