javascript - 如何用jQuery打开一个新窗口并访问新窗口中的元素？

Question

我有一个 HTML 表单，其中有两个带选项的选择元素和两个输入元素。

<form>
<select name="highSchool">
<option value="8342">Clinton High School</option>
<option value="9576">Washington High School</option>
<option value="8172">Roosevelt High School</option>
<option value="5431">Lincoln High School</option>
<option value="2460">Kennedy High School</option>
</select>

<br><br>

<select name="title">
<option value="1">Amazing Artist</option>
<option value="2">Awesome Athlete</option>
<option value="3">Marvelous Musician</option>
<option value="4">Scholar Student</option>
<option value="5">Wonderful Writer</option>
</select>
<br><br>
<input type="text" name='firstName' size="80" maxlength='30'>
<br><br>
<input type="text" name='lastName' size="80" maxlength='30'>
<br><br>
<button onclick="myFunction1()">Submit</button>
</form>

我有一个脚本可以根据随机字典自动填写字段并提交表单:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var random_dict = {'highSchool': 'Washington High School',
                   'title': 'Marvelous Musician',
                   'firstName': 'John',
                   'lastName':'Smith'}

//find correct option and select it
$("select[name='highSchool']").find('option').each(function(index,element){ 
if (element.text === random_dict.highSchool){
    $("select[name ='highSchool']").val(element.value);
                    };
});
//find correct option and select it
$("select[name='title']").find('option').each(function(index,element){ 
if (element.text === random_dict.title){
    $("select[name ='title']").val(element.value);
                    };
});
//fill the input elements
$("input[name ='firstName']").val(random_dict.firstName);
$("input[name ='lastName']").val(random_dict.lastName);

//submit form when done, this is the second form on the page
document.forms[1].submit();
}
</script>

我只能接收作为 element.text 的选择选项，因此我遍历选择选项，直到找到相应的 element.value。此脚本在我运行时有效。

我想在新窗口中打开我的表单并执行所有相同的操作。我试过像这样重写它，但它不起作用:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var windowName = $(this).attr('id');
var newWindow = window.open('http://www.exampleweb/example.phtml', windowName, "height=300,width=400");
var random_dict = {'highSchool': 'Washington High School',
                   'title': 'Marvelous Musician',
                   'firstName': 'John',
                   'lastName':'Smith'}

newWindow.document.$("select[name='highSchool']").find('option').each(function(index,element){ if (element.text === random_dict.highSchool){
    newWindow.document.$("select[name ='highSchool']").val(element.value);
                    };
});

newWindow.document.$("select[name='title']").find('option').each(function(index,element){ if (element.text === random_dict.title){
    newWindow.document.$("select[name ='title']").val(element.value);
                    };
});
newWindow.document.$("input[name ='firstName']").val(random_dict.firstName);
newWindow.document.$("input[name ='lastName']").val(random_dict.lastName);
newWindow.document.forms[1].submit();
}
</script>

如何调整所有 jQuery 选择器，如 $("input[name ='firstName']") 和 $("select[name='title']") 获取新窗口中的元素？我对 jQuery 和 Vanilla JS 解决方案持开放态度。

Answer 1

我相信您需要将脚本附加到新窗口，如下所示:

var newWindow = window.open('http://www.exampleweb/example.phtml', windowName, "height=300,width=400");
newWindow.document.createElement('script');
script.src = 'js/myScript.js';
newWindow.document.head.appendChild(script);

要访问新窗口中的元素，您只需引用新窗口的文档，如下所示:

var newWindow = window.open('http://www.exampleweb/example.phtml', windowName, "height=300,width=400");
newWindow.document.$("input[name ='firstName']").html('test');

将脚本部分翻译成 Vanilla JS 以对 newWindow 执行完全相同的操作:

var windowName = $(this).attr('id');
var newWindow = window.open('http://www.exampleweb/example.phtml', windowName, "height=300,width=400");
$(newWindow).on("load", function()
    {
      for (var i = 0; i < newWindow.document.querySelector("select[name='highSchool']").options.length; i++){
            var option = newWindow.document.querySelector("select[name='highSchool']").options[i];
            if (option.text === random_dict.highSchool){
                  newWindow.document.querySelector("select[name='highSchool']").value = option.value;
                  break;
            };
      };
            
            
      for (var j = 0; j < newWindow.document.querySelector("select[name='title']").options.length; j++){
            var option1 = newWindow.document.querySelector("select[name='title']").options[j];
            if (option1.text === random_dict.title){
                  newWindow.document.querySelector("select[name='title']").value = option1.value;
                  break;
            };
      };

      newWindow.document.querySelector("input[name='firstName']").value = random_dict.firstName;
      newWindow.document.querySelector("input[name='lastName']").value = random_dict.lastName;
});