Question

我有一张包含多张图片的表单。一旦用户点击任何图像，就会出现带有缩略图的弹出窗口。一旦他点击了任何缩略图，父窗口中的源图像就需要根据用户选择进行替换（交换原始图像）。以下脚本仅适用于一个图像，因为 logo1 和 placeHolder1 变量是硬编码的。如何将图像ID从父窗口发送到弹出窗口，以便以下是动态的？

editPage.editForm。 logo1 .value = oName

editPage。 placeHolder1 .src =“images / user /”+ oName;

BTW，主窗口中的图像名称和ID将根据表单模板进行更改。

的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

为什么使用

eval(window.opener.document);

您可以使用

var editPage = window.opener.document;

您可以使用下面给出的页面url传递ID

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

将id作为函数参数传递，如（logoWin(1)，logoWin(2)），如下所示

<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)'>

在logos.php文件中，使用

获取ID

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

然后，您可以将其用作JavaScript变量，如

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();
}

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

1 个答案: