解析跨域AJAX调用中的相对url

Parse relative URLs in cross-origin AJAX call?

本文关键字：相对 url 调用 AJAX      更新时间：2023-09-26

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

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

问题是，相对url (/x/y/)在由remote_url提到的页面被解析为chrome扩展的地址空间的一部分，当创建一个新的DOM与$(data)，如chrome-extension://abc/x/y/。

我怀疑这与某些跨域保护有关。有什么办法可以绕过这个吗?

使用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与基本元素来解析所有的相对链接，而不仅仅是在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();

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

相关文章：