Databases
StackOverflow2013
Postsdbo
POCannot call iframe function from parent (firefox addon)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCannot call iframe function from parent (firefox addon)
    text
    copied!<p>I´m developing a firefox addon and one of the features I need is inject a pop-up element inside the page the user is navigating.</p> <p>I tried injecting a DIV in the body but I had problems with my DIV inhering the page CSS and the pop-up show different in every page, so I decied to add it inside an iframe.</p> <p>Here is the addon code: main.js</p> <pre><code> exports.main = function() {}; var page_mod = require("page-mod"); var data = require("self").data; var self = require("self"); function initPageMod() { myPageMod = page_mod.PageMod({ include: ['*'], contentScriptWhen: "start", contentScriptFile: [data.url("jquery.js"), data.url("modPage.js")], onAttach: function(worker) { worker.port.emit("inject", data.load("iframecontent.html")); } }); } initPageMod(); </code></pre> <p>What I do here is install a page-mod on every page, inject jquery and my modPage.js and call the "inject" port when attached. iframecontent.html:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;title&lt;/title&gt; &lt;script type="text/javascript"&gt; window.showPopup = function() { } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; body &lt;/body&gt; &lt;/html&gt; </code></pre> <p>This is a very simple HTML file with a script tag that defines the showPopup function that I want to call from the parent document.</p> <p>modPage.js:</p> <pre><code>self.port.on("inject", function(iframeContent) { $(function(){ if(window.frameElement == null) { $('body').append( '&lt;div id="myExternalDiv" style="position:fixed;width:2560;height:auto;float:left;left:0px;top:0px;z-index:2147483647;overflow-x:hidden;overflow-y:hidden;background: transparent;margin: 0px;padding: 0px;"&gt;' + '&lt;iframe id="myMagicIframe" width="100%" height="100%" frameborder="0" style="width:100%; overflow-y: hidden;background-color:transparent;" scrolling="no" marginheight="0" frameborder="0" allowtransparency="true" onload="alert(1)"&gt;&lt;/iframe&gt;' + '&lt;/div&gt;' ); try { var oIframe = document.getElementById("myMagicIframe"); var iframeDoc = (oIframe.contentWindow.document || oIframe.contentDocument); iframeDoc.open(); iframeDoc.write(iframeContent); iframeDoc.close(); } catch (err) { alert(err); } setTimeout(function(){func()}, 5000); } }); }); function func() { if (document.getElementById("myMagicIframe") != null) { try { document.getElementById("myMagicIframe").contentWindow.showPopup(); }catch(err) { alert(err); setTimeout(function(){func()}, 1000); } } } </code></pre> <p>The "inject" creates an iframe inside a div, writes the iframecontent inside it and calls the func function after 5 seconds. What is happening is that I´m receiving the following exception: "showPopup is not a function". the document.getElementById("myMagicIframe").contentWindow.showPopup is undefined.</p> <p>If I add the above code in a HTML and run it in firefox it works and calls the showPopup function but inside the addon it is not working.</p> <p>I´m using addon builder: <a href="https://builder.addons.mozilla.org/package/159673/latest/" rel="nofollow">https://builder.addons.mozilla.org/package/159673/latest/</a></p> <p>Thank you</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload