如何創建由單獨的Javascript生成的數據填充的彈出式HTML

Question

我在彈出窗口中找到的所有教程都與我所需要的略有不同，並且我沒有專門知識來修改它們以適應我的需求。

我有一個browser_action圖標集，當您單擊它時會從HTML創建一個彈出窗口，並且在另一個文件中有一個javascript，該JavaScript將XMLHttpRequest發送到API。

這是我要完成的工作，但是如果這不可行，我願意接受其他方法來達到類似的結果：

我希望popup.html在按下瀏覽器附加按鈕時出現； 然后popup.html應該運行腳本httpsdetect.js，它將從另一個站點接收數據； 最后，httpsdetect.js應該將收到的數據顯示回popup.html。

這是我到目前為止所擁有的。

manifest.json：

  "manifest_version": 2, "name": "HTTPS Detect", "version": "1.0", "description": "Whatever", "icons": { "48": "icons/border-48.png" }, "browser_action": { "default_icon": "icons/browser-32.png", "default_title": "Page Info", "default_popup": "popup/popup.html" } }

Popup.html：

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="popup.css"/> </head> <body> <script src="httpsdetect.js"></script> </body> </html>

一個CSS文件：

 html, body { width: 100px; } .responseText { margin: 3% auto; padding: 4px; text-align: center; font-size: 1.5em; background-color: #E5F2F2; cursor: pointer; } .responseText:hover { background-color: #CFF2F2; }

將GET請求發送到另一個API的JavaScript。 當前，它只是將接收到的數據發送到控制台，但是我希望它填充popup.html：

 console.log("Site hostname is: " + window.location.hostname); var requestURL = "http://www.freegeoip.net/xml/" + window.location.hostname; getRequest(requestURL, theCallback); function getRequest(requestURL, theCallback) { var xhr = new XMLHttpRequest(); xhr.open("GET", requestURL, true); xhr.onload = function (e) { if (xhr.readyState === 4) { if (xhr.status === 200) { theCallback(xhr.responseText); } else { console.error(xhr.statusText); } } }; xhr.onerror = function (e) { console.error(xhr.statusText); }; xhr.send(null); } function theCallback(theResponse) { console.log(theResponse); }

Answer 1

這是一個簡單的版本。 更復雜的需要您完成:)

<body>
<span id="mySpan"></span>
</body>

JS：

function theCallback(theResponse) {
    var text = theResponse; // I don't know what you want... Just put the text of your response here.
    var mySpan = document.getElementById("mySpan");
    mySpan.textContent=text;
}

更新

看看： https : //developer.mozilla.org/zh-CN/Add-ons/SDK/Tutorials/Display_a_Popup

核心是：

var text_entry = require("sdk/panel").Panel({
  contentURL: data.url("text-entry.html"),
  contentScriptFile: data.url("get-text.js")
});

如何創建由單獨的Javascript生成的數據填充的彈出式HTML

問題描述

1 個解決方案

解決方案1
0 2016-10-03 03:59:46

如何創建由單獨的Javascript生成的數據填充的彈出式HTML

問題描述

1 個解決方案

解決方案1 0 2016-10-03 03:59:46

解決方案1
0 2016-10-03 03:59:46