如何在指定执行上下文运行JavaScript修改网站按钮文本？

你遇到的问题核心是：目标按钮不在主页面的DOM结构里，而是嵌套在**iframe（即你所说的checkout上下文）**中，主页面默认的JS执行上下文无法直接访问iframe内部的DOM元素。

下面是具体的解决办法：

方法一：主页面中主动切换到iframe上下文操作 #

1. 先定位到目标iframe元素（根据实际页面的iframe属性调整选择器，比如src、id或class），再获取其内部文档对象进行操作：

   // 获取目标iframe
   const checkoutIframe = document.querySelector('iframe[src*="checkout"]');
   // 确保iframe加载完成后再执行操作
   checkoutIframe.onload = function() {
     // 获取iframe内部的文档对象
     const iframeDoc = checkoutIframe.contentDocument || checkoutIframe.contentWindow.document;
     // 定时检查并修改按钮文本
     setInterval(() => {
       const bestellButton = iframeDoc.getElementsByClassName("_7tbHf _3LH_L")[0];
       if (bestellButton) {
         bestellButton.innerHTML = "Anfrage absenden";
       }
     }, 500);
   };
   

2. 注意：如果iframe的域名和主页面不一致，会触发浏览器同源策略限制，这种情况下该方法失效，需要用下面的扩展脚本方案。

方法二：用浏览器用户脚本（推荐，适配跨域场景） #

如果是跨域的iframe，用Tampermonkey这类用户脚本工具可以直接让脚本在目标iframe的上下文运行：

1. 编写脚本时，在元数据里指定匹配目标iframe的URL：

   // ==UserScript==
   // @name         修改Checkout按钮文本
   // @match        https://xxx.com/checkout/* // 替换成目标iframe的实际URL
   // @grant        none
   // ==/UserScript==
   
   setInterval(() => {
     const bestellButton = document.getElementsByClassName("_7tbHf _3LH_L")[0];
     if (bestellButton) {
       bestellButton.innerHTML = "Anfrage absenden";
     }
   }, 500);
   

2. 脚本会自动在目标iframe的执行上下文里运行，无需手动切换，直接就能定位到按钮。

额外优化建议 #

找到按钮并修改文本后，可以清除定时器，避免不必要的重复执行：

const intervalId = setInterval(() => {
  const bestellButton = iframeDoc.getElementsByClassName("_7tbHf _3LH_L")[0];
  if (bestellButton) {
    bestellButton.innerHTML = "Anfrage absenden";
    clearInterval(intervalId); // 修改完成后停止定时检查
  }
}, 500);

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