如何创建由单独的Javascript生成的数据填充的弹出式HTML

Question

All the tutorials I've found on popups are just slightly different than what I need and I don't have the know-how to modify them to my needs. 我在弹出窗口中找到的所有教程都与我所需要的略有不同，并且我没有专门知识来修改它们以适应我的需求。

I have a browser_action icon set which creates a popup from an HTML when you click on it, and I have a javascript in a separate file that sends an XMLHttpRequest to an API. 我有一个browser_action图标集，当您单击它时会从HTML创建一个弹出窗口，并且在另一个文件中有一个javascript，该JavaScript将XMLHttpRequest发送到API。

This is what I'm trying to accomplish, but I'm open to other ways of accomplishing a similar result if this is not feasible: 这是我要完成的工作，但是如果这不可行，我愿意接受其他方法来达到类似的结果：

I want popup.html to appear when the browser add-on button is pressed; 我希望popup.html在按下浏览器附加按钮时出现； then popup.html should run the script httpsdetect.js, which will receive data from another site; 然后popup.html应该运行脚本httpsdetect.js，它将从另一个站点接收数据； and finally, httpsdetect.js should display the data it received back into popup.html. 最后，httpsdetect.js应该将收到的数据显示回popup.html。

Here is what I have so far. 这是我到目前为止所拥有的。

A manifest.json: 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: 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>

A CSS file: 一个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; }

A JavaScript that sends a GET request to another API. 将GET请求发送到另一个API的JavaScript。 Currently, it's just sending the received data to the console, but I want it to populate the popup.html instead: 当前，它只是将接收到的数据发送到控制台，但是我希望它填充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

Here is a simple version. 这是一个简单的版本。 The more complex needs you to finish :) 更复杂的需要您完成:)

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

JS: 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;
}

Update 更新

Have a look: https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Display_a_Popup 看看： https : //developer.mozilla.org/zh-CN/Add-ons/SDK/Tutorials/Display_a_Popup

And the core is: 核心是：

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