在跨源AJAX调用中解析相对URL？

Question

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

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

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

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

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

Answer 2

如果您以字符串形式接收该URL，则只需使用一些常规的旧Javascript对其进行解析，然后删除不需要的部分。 如果您需要更多帮助，只需张贴您收到的完整字符串和所需的字符串，我可以看看。 您可能最终只会使用.split（）。pop（）。join（）之类的东西，但是我很乐意看一下并给您明确的答案。

在跨源AJAX调用中解析相对URL？

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-10-09 19:14:16

解决方案2
0 2016-10-09 18:44:07

在跨源AJAX调用中解析相对URL？

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-10-09 19:14:16

解决方案2 0 2016-10-09 18:44:07

解决方案1
1 已采纳 2016-10-09 19:14:16

解决方案2
0 2016-10-09 18:44:07