Display a new html/web page in panel

Question

I am developing an addon for firefox using addon-SDK method. I would like to know if there is anyway to change the html(contentURL) displayed in that panel to a new webpage upon clicking a link in that contentURL. Thanks in advance.

Answer 1

Vignesh here's code that receives the url clicked on:

https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/panel#Scripting_panel_content

var myScript = "window.addEventListener('click', function(event) {" +
               "  var t = event.target;" +
               "  if (t.nodeName == 'A')" +
               "    self.port.emit('click-link', t.toString());" +
               "}, false);"

var panel = require("sdk/panel").Panel({
  contentURL: "http://www.bbc.co.uk/mobile/index.html",
  contentScript: myScript
});

panel.port.on("click-link", function(url) {
  console.log(url);
});

panel.show();

So then you can change that to be instead of console.log(url) you can make it find your panel and changes its iframes location to that url. Im not sure how to do this with sdk methods, maybe someone else can share. I would try to do this though:

panel.port.on("click-link", function(url) {
  panel.contentURL = url;
});

edit: panel.contentURL = url may not work so you have to do it like this:

const { getMostRecentBrowserWindow } = require('sdk/window/utils');
var aXULBrowser = getMostRecentBrowserWindow();
aXULBrowser.getElementById('ID OF YOUR PANEL, probably same as id to your widget here').getElementsByTagName('iframe').contentWindow.location = url;