无需用户干预从DOM上传文件可行吗？NightmareJS遇iframe适配难题

Great question! You absolutely can achieve headless file uploads directly via the DOM without user interaction—here's how to do it, including a workaround for the iframe issue you're facing with NightmareJS.

核心原理：利用原生File API绕过用户交互限制 #

While <input type="file"> elements have a read-only value property for security, modern browsers let you programmatically set their selected files using the File API and DataTransfer interface. This avoids the need for user clicks or system file pickers.

Step 1: Prepare your file content #

In a Node.js environment like NightmareJS, first read your local file into a format the browser can use (an ArrayBuffer or Blob):

const fs = require('fs').promises;
const fileContent = await fs.readFile('/path/to/file.txt');
const arrayBuffer = fileContent.buffer; // Convert Buffer to ArrayBuffer

Step 2: Target the file input (even in iframes) #

The key fix for your iframe issue is to explicitly access the iframe's content document instead of relying on a plugin that might not handle iframe contexts.

In your NightmareJS evaluate call, fetch the iframe's document and the target file input:

const iframe = document.querySelector('#your-iframe-selector');
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
const fileInput = iframeDoc.querySelector('#myFileInput');

Step 3: Programmatically set the file #

Create a File object from your content, use DataTransfer to build a file list, and assign it to the input's files property. Finally, trigger a change event to let the page know a file was selected:

// Create the File object
const file = new File([arrayBuffer], 'file.txt', { type: 'text/plain' });

// Build a FileList using DataTransfer
const dataTransfer = new DataTransfer();
dataTransfer.items.add(file);
fileInput.files = dataTransfer.files;

// Trigger the change event to simulate user selection
fileInput.dispatchEvent(new Event('change', { bubbles: true }));

Full NightmareJS Implementation #

Putting it all together, here's a complete script that handles iframe file uploads without relying on nightmare-upload:

const Nightmare = require('nightmare');
const fs = require('fs').promises;

(async () => {
  const nightmare = Nightmare({ show: true });
  await nightmare.goto('https://your-target-page.com');

  // Read local file content
  const fileContent = await fs.readFile('/path/to/file.txt');
  const arrayBuffer = fileContent.buffer;

  // Execute DOM manipulation in the page context
  await nightmare.evaluate((fileBuffer, iframeSelector, inputSelector) => {
    // Access the iframe's document
    const iframe = document.querySelector(iframeSelector);
    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    const fileInput = iframeDoc.querySelector(inputSelector);

    // Create and assign the file
    const file = new File([fileBuffer], 'file.txt', { type: 'text/plain' });
    const dataTransfer = new DataTransfer();
    dataTransfer.items.add(file);
    fileInput.files = dataTransfer.files;

    // Trigger change event to update the page state
    fileInput.dispatchEvent(new Event('change', { bubbles: true }));
  }, arrayBuffer, '#target-iframe', '#myFileInput');

  // Optional: Submit the form or proceed with upload
  await nightmare.click('#submit-upload-button');
  
  await nightmare.end();
})();

Why this works better than nightmare-upload for iframes #

The nightmare-upload plugin likely doesn't account for iframe contexts by default—it probably targets elements in the main document only. By directly accessing the iframe's contentDocument in your evaluate call, you bypass this limitation entirely.

Compatibility Note #

This approach works in all modern browsers (Chrome, Firefox, Edge) and since NightmareJS uses Electron (which is based on Chromium), you won't run into compatibility issues here.

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