在跨域 AJAX 调用中解析相对 URL？答案

【问题标题】：Parse relative URLs in cross-origin AJAX call?在跨域 AJAX 调用中解析相对 URL？
【发布时间】：2016-10-10 03:45:16
【问题描述】：

我正在编写一个 Chrome 扩展程序。我想向远程 URL 发出 AJAX 请求，将返回数据解析为 HTML，然后与 DOM 交互，例如点击链接：

$.ajax({
    url: remote_url,
    success: function(data) {
        $(data).find('some element').click()
    }
})

问题是remote_url 引用的页面上的相对 URL (/x/y/) 在使用 $(data) 创建新 DOM 时被解析为 chrome 扩展地址空间的一部分，例如 chrome-extension://abc/x/y/。

我怀疑这与某些跨域保护有关。有没有办法解决这个问题？

【问题讨论】：

不能使用完整的网址吗？

标签： javascript jquery google-chrome-extension cross-domain

【解决方案1】：

使用 HTML5 URL 类解析相对链接：

$data = $(data);
$data.find('[href]').each(function() {
    var href = this.getAttribute('href'); # 'this' is a DOM element
    if (href.indexOf('://') < 0) {
        this.href = new URL(href, remote_url);
    }
});

或者使用 HTML5 DOMParser 和 base 元素来解析所有相关链接，而不仅仅是在 href 中。

data 包含没有 html/body 的片段：

var $doc = $(new DOMParser().parseFromString('<html><head><base href="' +
    remote_url + '"></head><body>' + data + '</body></html>', 'text/html'));

data 包含整个页面：

var $doc = $(new DOMParser().parseFromString(data, 'text/html'));
$('head', $doc).append('<base href="' + remote_url + '">');

$doc.find('some element').click();

【讨论】：

【解决方案2】：

如果您以字符串形式接收该 URL，我将使用一些常规的旧 Javascript 对其进行解析并删除您不想要的部分。如果您需要更多帮助，只需发布您收到的完整字符串和您需要的字符串，我可以看看。你可能最终会使用 .split().pop().join() 之类的东西，但我很想看看并给你一个明确的答案。

【讨论】：