Javascript 如何在window/DIV中打开媒体库以使用图像url填充表单字段？

我有一个HTML表单字段，它将获取我的图像的url。我（在我网站的另一部分）有一个媒体库，用户可以在其中加载和组织他们的图像。 现在，我希望能够在新窗口中打开此媒体库（对我来说更简单，但不知道如何使用新窗口中的脚本填充主窗口中的表单字段，不允许使用方法？），或者将媒体库读入div（更麻烦的是，我不得不重写媒体库导航的大部分内容，以不刷新页面，而只刷新该div）

---

我从来没有这样做过，所以我想也许有经验丰富的人可以给我一个提示，让我朝着正确的方向出发。

我最终使用了内置Iframe的jQuery模式对话，点击图像后，输入字段填充，对话关闭

一些示例代码，如果它可以成为任何人的灵感

这是我的带有浏览按钮的输入框

<input type='text' name='data_1' id='data_1' size='30' value='' /> <input type='button' value='Bläddra' onclick="openMediaLibrary('data_1');" />

最后是分配图像和关闭媒体库的函数

<a href="javascript:selectImage('{{ entity.webPath }}')"><img src="{{ entity.webPath | apply_filter('my_thumb') }}" class="media_archive_image" /></a>

function selectImage(image) {

    if (parent.window.imageInputField) {
        //set image to the input field
        parent.window.document.getElementById(parent.window.imageInputField).value = image;

        //Close the dialogue box
        parent.window.closeMediaLibrary();

    }
    else {
        //do nothing for now, perhaps show image in fullsize in lightbox here?
    }
}   

$(document).ready(function() {
        $( "#mediaLibrary" ).dialog({
        height: 700,
        width:1100,
        modal: true,
        autoOpen: false,
        position: { my: "center", at: "center" },
    });
};

function openMediaLibrary(passedField) {
    //Set the variable that keeps track of which field to pass back the image url to
    window.imageInputField = passedField
    //open the mediaLibrary
    $( "#mediaLibrary" ).dialog( "open" );
}   

function closeMediaLibrary() {
    $( "#mediaLibrary" ).dialog( "close" );
}   

function selectImage(image) {

    if (parent.window.imageInputField) {
        //set image to the input field
        parent.window.document.getElementById(parent.window.imageInputField).value = image;

        //Close the dialogue box
        parent.window.closeMediaLibrary();

    }
    else {
        //do nothing for now, perhaps show image in fullsize in lightbox here?
    }
}