javascript - 将值从父窗口传递到子窗口和函数内

Question

I've a form that contains several images. Once the user clicks whichever image a popup window with thumbnails is come up. Once he clicks whichever thumbnail, the source image in the parent window needs to replaced according the user selection (swapping the original image). The following script works fine for one image only since logo1 and placeHolder1 variables are hard coded. How can I send the image id from the parent window to the popup window, so the following will be dynamic?

editPage.editForm.logo1.value = oName

editPage. placeHolder1.src = " images/user/" + oName;

BTW, the images name’s and id’s in the main window subject to be changed according the form template.

template.php

<script type="text/javascript">
function logoWin() {
window.open('logos.php','logos','height=500,width=700,status=yes,toolbar=no,menubar=no,location=no,scrollbars=yes,resizable=yes');
}
</script>

<form action="" id="editForm" name="editForm" enctype="multipart/form-data">
<img src=”images/user/logo1.jpg” name="placeHolder1" id="placeHolder1" onclick='logoWin()'>
<img src=”images/user/logo2.jpg” name="placeHolder2" id="placeHolder2" onclick='logoWin()'>
<img src=”images/user/logo3.jpg” name="placeHolder3" id="placeHolder3" onclick='logoWin()'>

<input type="hidden" name="logo1" value="<?php echo $main_logo1; ?>" />
<input type="hidden" name="logo2" value="<?php echo $main_logo2; ?>" />
<input type="hidden" name="logo3" value="<?php echo $main_logo3; ?>" />

<input type="submit" value="Save" id="save">
</form>

logos.php

<script language="JavaScript">
    function getFile(oImg){
        editPage = eval(window.opener.document)
        oSrc = oImg.src;
        lastSlash = oSrc.lastIndexOf('/');
        oName = oSrc.substr(lastSlash+1);
        editPage.editForm.logo1.value = oName
        editPage. placeHolder1.src = " images/user/" + oName;
        this.close()
    }
    </script>   

[php loop]
<img src='images/user/".$row->img_file_name."' onclick='getFile(this)'>
<img src='images/user/".$row->img_file_name."' onclick='getFile(this)'>
<img src='images/user/".$row->img_file_name."' onclick='getFile(this)'>

Answer 1

Why you are using

eval(window.opener.document);

You can use

var editPage = window.opener.document;

You can pass the id with url of the page as given below

function logoWin(id) {
    window.open('logos.php?id='+id,'logos','height=500,...');
}

Pass the id as function paarameter, like (logoWin(1), logoWin(2)) as given below

<img src=”images/user/logo1.jpg” name="placeHolder1" id="placeHolder1" onclick='logoWin(1)'>
<img src=”images/user/logo2.jpg” name="placeHolder2" id="placeHolder2" onclick='logoWin(2)'>

In your logos.php file, get it id using

$id = $_GET['id']; // it could be 1 or 2 or 3 and so on

Then, you can use it as JavaScript variable like

function getFile(oImg){
    var id = <?php echo $id; ?>;
    editPage = eval(window.opener.document);
    oSrc = oImg.src;
    lastSlash = oSrc.lastIndexOf('/');
    oName = oSrc.substr(lastSlash+1);
    var logo = 'logo'+id, placeHolder = 'placeHolder'+id;
    editPage.editForm[logo].value = oName;
    editPage[placeHolder].src = " images/user/" + oName;
    this.close();
}