javascript - 将网页 B 的部分插入到网页 A

Question

我正在尝试编写一个用户脚本，(应该)允许我从任何网页打开翻译器。

我在当前网页的主体上附加了一个按钮，单击它时，它会从翻译器(google、reverso...)检索内容并将其显示在网页上。

代码如下:

var input = document.createElement("input");
input.type = "button";
input.value = "Open translator";
input.onclick  = OpenTranslator;

document.body.appendChild(input);

function OpenTranslator(){
  GetTranslatorContent();
}

function GetTranslatorContent(){
  $.get('http://www.reverso.net/text_translation.aspx?lang=FR').then(function(responseData){
    //alert("Got content");
    //document.body.appendChild($('.translate-holder'));
    var targetContent = $('.translate-holder');
    if (targetContent != null && targetContent != undefined){
      alert("Good so far");
    }
  })

}

但是，我在运行此代码时收到此消息:

所以，我的问题是:

是否有可能做我想做的事？ (从一个页面获取内容放到另一个页面)

如果对上一个问题的回答是肯定的，我可以在我不是管理员的页面上这样做吗？ (因为如果我理解得很好，我得到的错误是因为我请求的页面不允许我做我想做的)

谢谢

Answer 1

是的，这是可能的。您必须使用跨域请求。看一个纯 JS 的例子。

var XHR = ("onload" in new XMLHttpRequest()) ? XMLHttpRequest : XDomainRequest;

var xhr = new XHR();

// cross domain request
xhr.open('GET', 'http://domain/request', true);

xhr.onload = function() {
  alert( this.responseText ); // response
}

xhr.onerror = function() {
  alert( 'Error ' + this.status ); // Error
}

xhr.send();

但不要忘记:

Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, but they're limited by the same origin policy. Extensions aren't so limited. An extension can talk to remote servers outside of its origin, as long as it first requests cross-origin permissions.

(来自 https://developer.chrome.com/apps/xhr)