如何通过jQuery仅加载跨站页面的核心问题区域到当前DOM？

问题分析 #

直接用jQuery load() 方法加载Bitbucket的Issues页面会加载整个页面，而且因为跨域资源共享（CORS）限制，即使在URL后添加选择器（比如 load(url + ' .issue-list')）也无法生效，浏览器会拦截跨域请求。加上Bitbucket禁用了iframe嵌入，常规前端方法行不通。

可行解决方案（基于David的实现思路） #

核心思路是通过服务器端代理转发请求绕过CORS限制，再在前端提取页面中的核心问题区域：

1. 搭建服务器端代理 #

以Node.js + Express为例，写一个代理接口获取Bitbucket页面的HTML内容：

const express = require('express');
const axios = require('axios');
const app = express();

app.get('/proxy-bitbucket', async (req, res) => {
  try {
    const bitbucketUrl = 'https://bitbucket.org/alceawisteria/ostr/issues?status=new&status=open';
    const response = await axios.get(bitbucketUrl);
    res.send(response.data);
  } catch (error) {
    res.status(500).send('获取页面失败');
  }
});

app.listen(3000, () => {
  console.log('代理服务器运行在 http://localhost:3000');
});

2. 前端修改代码 #

将请求目标改为代理接口，获取HTML后提取核心问题区域（需先通过浏览器开发者工具确认Bitbucket页面中问题列表容器的选择器，比如实际类名可能是 .issue-listing）：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
<script type="text/javascript">
$(document).ready(function(){
  $.get('/proxy-bitbucket', function(html){
    // 提取核心问题区域并插入到容器中
    const issueContent = $(html).find('.issue-listing').html();
    $('#bitbucketissue').html(issueContent);
  });
});
</script>
<div class="formClass">
  <div id="bitbucketissue"></div>
</div>

注意事项 #

• 务必确认Bitbucket页面核心区域的准确选择器：打开目标页面，用浏览器开发者工具定位问题列表所在的容器，获取对应的ID或类名。
• 服务器端代理需和前端页面同域，或配置CORS允许前端域名访问。
• 避免频繁请求Bitbucket页面，防止触发反爬机制。

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