简体   繁体   English

在子窗口中使用数组元素使用getElementById更改父窗口中的图像

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

So I'm trying to complete some javascript and having trouble codeing links to update a image. 因此,我正在尝试完成一些javascript,并且在编码链接以更新图像时遇到了麻烦。 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父窗口:(尚未弄清楚如何在此处发布html :()

<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:

<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 JAVASCRIPT子节点

  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. 我正在尝试访问image标签中父节点中的元素并显示一个数组元素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. 换句话说,图像1到图像6的想法是按下子节点中的按钮并显示第一个图像元素[0]以供理解按下另一个按钮元素[5]或按下另一个按钮以显示下一个元素[i + 1]另一个按钮。 THanks for the help. 谢谢您的帮助。

There are quite some ways on how to communicate between parent and child window. 有很多方法可以在父窗口和子窗口之间进行通信。 See this for more info. 请参阅此以获取更多信息。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM