如何使用jQuery加载页面并点击按钮，及iframe的JavaScript替代方案

重要前提：所有操作目标页面DOM的逻辑都必须遵守浏览器同源策略：你运行脚本的当前页面和目标页面（twitch.tv）的域名、协议、端口必须完全一致，否则浏览器会禁止访问目标页面的DOM，所有操作都会报错失败。这个是浏览器的安全限制，没有绕过方案。

逻辑和你原有原生实现完全一致，替换为jQuery的语法封装：

function subToChannel(channelUrl) {
  // 创建隐藏iframe元素
  const $iframe = $('<iframe>').hide().attr('src', channelUrl)
  // 绑定iframe加载完成事件
  $iframe.on('load', function() {
    console.log('Loaded iframe')
    setTimeout(() => {
      // 查找iframe内的目标按钮并触发点击
      $(this).contents().find('#root > div > div.sc-AxjAm.tlQbp > div > main > div.root-scrollable.scrollable-area > div.simplebar-scroll-content > div > div > div.channel-root.channel-root--home.channel-root--unanimated > div.sc-AxjAm.fFlSEB > div.channel-root__info.channel-root__info--offline.channel-root__info--home > div > div.sc-AxjAm.kKCcYr.home-header-sticky > div.sc-AxjAm.gwJhkY > div.sc-AxjAm.QGSNR > div.ScTokenOverridesRegion-sc-15cvq8c-0.lfbUBX > div > div > div > div > div > div.sc-AxjAm.evhokJ > div > div > div > div > button').trigger('click')
      console.log('Subscribed to the channel: ' + channelUrl)
    }, 5000)
  })
  // 将iframe插入到当前页面
  $('body').append($iframe)
  console.log('Added iframe to the page')
}

subToChannel('https://www.twitch.tv/fdghgffhgjhjhjgjh')

普通前端页面环境下iframe是唯一可实现该需求的原生方案，其他方案都有场景限制：

• 静态内容抓取：用fetch直接请求目标页面的HTML字符串，通过DOMParser解析成DOM后操作。仅适用于纯静态内容，无法执行页面JS，你需要的动态渲染的订阅按钮无法被解析到，不适用于当前场景。
• 浏览器扩展脚本：如果你是在浏览器扩展中运行该逻辑，可以申请对应域名的访问权限，通过tabsAPI直接打开新标签页加载目标页面，再注入内容脚本执行点击操作，不需要插入iframe。仅适用于浏览器扩展场景，普通前端页面无法使用。
• 无头浏览器工具：如果是自动化测试/爬虫类的后端/工具场景，可以使用Puppeteer、Playwright等工具直接启动浏览器实例加载页面模拟点击，不受同源策略限制。无法在普通前端页面中运行。

内容的提问来源于stack exchange，提问作者Sevcan Gürbüz