如何解决HTML按钮触发新标签页后JS自动点击失效问题？

Hey there! Let's break down why your current code isn't working and get your auto-clicker up and running smoothly.

The Problem With Your Current Code #

First, let's unpack what's happening in your snippet:

function updateButton() { 
  window.open("https://clickthatbutton.com", '_blank'); 
  document.getElementById("submit").click(); 
}

• The document.getElementById("submit").click() line runs on your original page, not the new tab you just opened. That's why you're not seeing the action happen in the target site.
• Even if you tried to target the new tab directly, browsers block cross-domain DOM access due to strict same-origin policy security rules. Since your original page and clickthatbutton.com are different domains, you can't manipulate the new tab's elements directly from your parent page.

Solutions to Make It Work #

We have two solid paths depending on whether you can modify the target website (clickthatbutton.com) or not.

Option 1: If You Control the Target Website

Add a way for the target page to detect when it should auto-click the button, using a URL parameter:

1. Update your original page's code to pass a flag in the URL:

function updateButton() {
  // Add a query parameter to tell the target page to trigger the click
  const newTab = window.open("https://clickthatbutton.com?autoClick=1", '_blank');
}

2. Add code to the target page (clickthatbutton.com) to listen for this parameter and execute the click:

// Wait for the page to fully load before trying to interact with elements
window.addEventListener('load', () => {
  const urlParams = new URLSearchParams(window.location.search);
  // Check if the auto-click flag is present in the URL
  if (urlParams.get('autoClick') === '1') {
    const submitButton = document.getElementById("submit");
    if (submitButton) {
      submitButton.click();
    }
  }
});

Option 2: If You Can't Modify the Target Website

Your only reliable option here is to build a browser extension (like a Chrome or Firefox add-on). Extensions can inject scripts into specific domains and bypass cross-origin restrictions for trusted actions.

Here's a quick example of a Chrome extension that does exactly what you want:

1. Create manifest.json (the extension's core configuration file):

{
  "manifest_version": 3,
  "name": "Auto Clicker Tool",
  "version": "1.0",
  "permissions": ["activeTab"],
  "action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["https://clickthatbutton.com/*"],
      "js": ["content.js"]
    }
  ]
}

2. Create popup.html (the small window that opens when you click the extension icon):

<!DOCTYPE html>
<html>
<body style="padding: 10px; width: 150px;">
  <button id="startAutoClick" style="width: 100%; padding: 8px;">Start Auto Click</button>
  <script src="popup.js"></script>
</body>
</html>

3. Create popup.js (handles the button click in the popup):

document.getElementById('startAutoClick').addEventListener('click', () => {
  // Open the target page in a new tab
  chrome.tabs.create({url: "https://clickthatbutton.com"}, (tab) => {
    // Wait for the page to finish loading before sending a command
    chrome.tabs.onUpdated.addListener(function listener(tabId, info) {
      if (tabId === tab.id && info.status === 'complete') {
        // Send a message to the content script to trigger the click
        chrome.tabs.sendMessage(tabId, {action: "clickSubmitButton"});
        chrome.tabs.onUpdated.removeListener(listener);
      }
    });
  });
});

4. Create content.js (the script that runs inside the target page):

// Listen for messages from the popup extension
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "clickSubmitButton") {
    const submitBtn = document.getElementById("submit");
    if (submitBtn) {
      submitBtn.click();
    }
  }
});

To use this extension:

• Create a folder with all these files
• Open Chrome, go to chrome://extensions/
• Enable "Developer mode" (toggle in the top-right corner)
• Click "Load unpacked" and select your extension folder

Key Takeaway #

Browsers block cross-domain DOM access to keep users safe, so you can't directly control a new tab's elements from your original page. The solution depends on whether you can modify the target site—use URL parameters if you can, or a browser extension if you can't.

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