如何使用jQuery从原页面访问新浏览器窗口中的元素？

默认情况下，jQuery的选择器是基于当前页面的document上下文执行查找的，所以直接用$('#SecondDiv')找不到新窗口里的元素——因为新打开的窗口有独立的document对象和DOM环境。

解决方法 #

方法1：指定jQuery的查找上下文

把新窗口的document作为第二个参数传给jQuery选择器，明确告诉它要在哪个上下文里查找元素：

// 原页面中执行
newWindow = window.open('','','width=200, height=200')
divInWindow = newWindow.document.createElement('div')
divInWindow.id = 'SecondDiv'
newWindow.document.body.appendChild(divInWindow)

// 用jQuery获取新窗口内的元素
const $secondDiv = $('#SecondDiv', newWindow.document);
console.log($secondDiv[0]); // 输出新窗口里的SecondDiv元素

方法2：使用新窗口的jQuery对象（如果新窗口加载了jQuery）

如果新窗口的页面也引入了jQuery，可以直接调用新窗口的$对象来查找元素：

// 确保新窗口已加载jQuery后执行
const $secondDiv = newWindow.$('#SecondDiv');
console.log($secondDiv[0]);

注意事项 #

• 同源限制：必须保证原页面和新窗口是同源的（协议、域名、端口都一致），否则浏览器的同源策略会禁止跨窗口的DOM操作，不管是原生JS还是jQuery都无法生效。
• 如果新窗口是空白页（如示例中的空URL），可以手动给它注入jQuery脚本：

const script = newWindow.document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.7.1.min.js'; // 可替换为本地jQuery路径
newWindow.document.body.appendChild(script);

// 等待脚本加载完成后再操作
script.onload = () => {
  newWindow.$('#SecondDiv').text('通过原页面的jQuery操作新窗口元素');
};

内容的提问来源于stack exchange，提问作者Jim