在跨源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