bookmarklet 无法在新页面加载完成前执行 dom 操作，因其作用域仅限于当前页面；需改用用户脚本（如 tampermonkey）实现跨页面自动交互。
bookmarklet 无法在新页面加载完成前执行 dom 操作，因其作用域仅限于当前页面；需改用用户脚本（如 tampermonkey）实现跨页面自动交互。
在浏览器中，Bookmarklet 运行于当前页面上下文，调用 window.open(..., '_self') 实际是导航跳转，但后续的 document.querySelector 和 submit() 仍试图在原页面（即将销毁） 中执行——此时目标页面尚未加载，DOM 根本不存在，因此操作失败，必须二次点击才生效。
❌ 为什么原代码无效？
window.open("https://www.foreca.se/Sverige/Stockholm/Stockholm", '_self');
// 此行触发页面跳转，JS 执行流在此中断
document.querySelector("#stationForm > select.stationSelect > option[value='1020002460']").selected = 'selected'; // ❌ 原页面已卸载，报错或静默失效
即使使用 _blank，Bookmarklet 也无法跨窗口访问新页面 DOM（受同源策略与跨窗口权限限制），更无法等待其加载完成。
✅ 推荐方案：Tampermonkey 用户脚本
安装 Tampermonkey 后，创建一个匹配目标 URL 的脚本，可精准控制页面加载后的自动化操作：
// ==UserScript==
// @name Foreca Stockholm Auto-Select
// @namespace https://github.com/yourname
// @version 1.0
// @description 自动选择指定气象站并提交表单
// @author You
// @match https://www.foreca.se/Sverige/Stockholm/Stockholm
// @grant none
// @run-at document-idle
// ==/UserScript==
(function() {
'use strict';
// 确保 DOM 就绪且表单存在
const form = document.getElementById('stationForm');
const select = form?.querySelector('select.stationSelect');
const option = select?.querySelector('option[value="1020002460"]');
if (form && select && option) {
option.selected = true;
form.submit();
} else {
console.warn('未能找到表单或选项元素，请检查页面结构是否变更');
}
})();
✅ @run-at document-idle 保证脚本在 DOM 解析完成、资源加载前执行，兼顾速度与可靠性；
✅ @match 精确限定作用域，避免误触发；
✅ 内置空值检查，提升健壮性。
⚠️ 注意事项
- Bookmarklet 本质是当前页的即时脚本，不支持跨页面监听或延迟执行（setTimeout 在跳转后失效）；
- 浏览器扩展（如 Tampermonkey、Violentmonkey）是解决此类需求的标准方案；
- 若目标站点启用 CSP 或动态渲染（如 React/Vue），可能需要 @run-at document-end 或 MutationObserver 监听元素挂载。
总之，自动化跨页面操作应交由用户脚本管理器处理——它提供完整的生命周期控制、跨域安全模型和稳定执行环境，远超 Bookmarklet 的能力边界。
