如何用JavaScript在打开的外部网站填充搜索框并触发搜索？

首先得明确核心障碍：浏览器的同源策略。你在自己页面的自定义函数里用window.open()打开目标网站后，没法直接操作新窗口的DOM——因为两个页面域名不同，浏览器会阻止这种跨域操作，这就是为什么你在控制台能运行的代码，放到自定义函数里就失效了。

下面给你几个可行的解决方案，按优先级排序：

方案1：直接构造搜索结果URL（最优解） #

大多数网站的搜索功能都支持通过URL参数直接跳转搜索结果，不用手动填充输入框。你可以先手动在目标网站完成一次搜索：

1. 打开https://www.mercadopublico.cl/Home
2. 在搜索框输入geo，点击搜索按钮
3. 观察跳转后的URL（比如实际测试后，搜索geo的结果页URL是https://www.mercadopublico.cl/Home/Buscar?parametro=geo）

之后你的自定义函数直接打开这个带参数的URL就行，代码如下：

function openAndSearch() {
  const searchQuery = 'geo';
  // 用encodeURIComponent处理特殊字符，避免URL解析错误
  const searchUrl = `https://www.mercadopublico.cl/Home/Buscar?parametro=${encodeURIComponent(searchQuery)}`;
  window.open(searchUrl);
}

这个方法完全避开了跨域问题，简单又可靠。

方案2：使用用户脚本（Tampermonkey/Greasemonkey） #

如果你必须要打开网站首页再自动执行搜索，可以借助用户脚本扩展（比如Tampermonkey），它能让你的代码在目标页面的上下文里运行，不受同源策略限制：

1. 安装Tampermonkey浏览器扩展
2. 创建新的用户脚本，填入以下代码：

// ==UserScript==
// @name         Auto Search Mercado Publico
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Auto fill search and submit on Mercado Publico
// @author       You
// @match        https://www.mercadopublico.cl/Home
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    // 页面加载完成后执行
    window.addEventListener('load', function() {
        const searchInput = document.getElementById('txtBuscar');
        const searchButton = document.getElementById('btnBuscar');
        if (searchInput && searchButton) {
            searchInput.value = 'geo';
            searchButton.click();
        }
    });
})();

3. 保存脚本后，你的自定义函数只需要正常打开目标网站：

function openAndSearch() {
  window.open('https://www.mercadopublico.cl/Home');
}

当新窗口加载完成时，用户脚本会自动填充搜索框并触发搜索。

为什么控制台里能运行？ #

因为控制台是在目标页面的上下文环境中执行代码，和页面属于同源，所以浏览器允许操作DOM；而你的自定义函数是在自己的页面里运行，属于不同域名，跨域操作被浏览器安全策略禁止了。

内容的提问来源于stack exchange，提问作者Tatan Iglesias Nuñez