JavaScript 范围问题？

Question

我正在为 Chrome 编写扩展程序，但在更新变量时遇到问题。我试图获取 URL 和域名并将其显示在扩展弹出窗口中，但显示的只是“[object HTMLDivElement]”。我认为这可能是一个范围问题，但我不确定为什么下面的函数没有更新全局变量。

$(function() {
	var urlStr = "";
	var domain = "";
	urlStr = getURL();

	function getURL(){
		chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
			var activeTab = tabs[0];
			var url = activeTab.url;
			var urlParts = activeTab.url.replace('http://','').replace('https://','').split(/[/?#]/);
			domain = urlParts[0];
		});
		return url;
	}
  
  
  $('#pageURL').append('<h3>' + domain + '<h3>');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="pageURL"></div>

Answer 1

chrome.tabs.query 是异步的，因此当执行 $('#pageURL').append... 行时它仍然会运行。您所需要做的就是将该行移至 query 回调中:

$(function() {    
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        var activeTab = tabs[0];
        var domain = activeTab.url.replace(/http[s]?\:\/\//, '').split(/[/?#]/).shift();
        $('#pageURL').append('<h3>' + domain + '<h3>');
    });
}