Connecting javascript functions to XUL file - javascript

I have a javascript file connected to my XUL file as follows:
<script type="application/javascript"
src="chrome://myexample/content/myexample.js"/>
The overlay from the XUL file is displayed in Firefox, but my functions aren't working.
e.g.
<statusbar id="status-bar">
<statusbarpanel id="f1"
label="f1"
onclick = "MyExample.f1()"
/>
</statusbar>
myexample.js file looks like:
var MyExample = {
f1: function() {
},
f2: function() {
}
}
This is my chrome.manifest:
content myexample content/
overlay chrome://browser/content/browser.xul chrome://myexample/content/myexample.xul
Where could be the fault?

There doesn't seem to be anything wrong with the code you posted, apart from the missing = in
var MyExample = {
...not sure if that's a typo in the original code or just in the snippet here.
Did you set the javascript.options.showInConsole and check the Error Console? Are there any messages there when you open the window you try to modify?
You could also be hitting the fact that the chrome code is cached. The effect is that the code you have in your file is not the same code that's running in Firefox. The way to deal with it is to set the disable_xul_cache pref mentioned on the same page as the showInConsole pref I linked to above (and/or run with -purgecaches param). If you have any doubts, make an observable change (i.e. one that has to change the observed behaviour, e.g. pops an alert) to the file you think is cached.
[edit] also you could try opening chrome://myexample/content/myexample.js in a tab to see if the chrome.manifest magic is working correctly and you got the URL right, but I guess in your case it's fine.

You dont need MyExample. part.

Related

Script didn't work on Firefox, 0 reaction on hover

I have a script that working perfectly on Chrome, but in Firefox there is no action after hovering linked object.
I tried to divide the script.js file for separate documents, but It won't help at all.
Here is the whole effect:
https://jsfiddle.net/lszewczyk45/9unawydo/9/
$(document).ready(function () {
const effect = new Effects('hover-effects');
effect.addEffect(document.querySelector('#cityEffect'), 'city', [ONMOUSEOVER]);
});
I think the problem is in calling the script - the lines at the end of the file, I pasted it above.
This is what FireFox says about your Javascript code:
I solve it, pasted in https://babeljs.io/, compile and change the js code.

Existing Functions aren't Functions?

So I'm working on a project. My functions are working fine, until all of a sudden I click a button that should run download(), but it doesn't. So I open the console, and see this:
TypeError: download is not a function
And I'm confused. I run download() from the console, and it works fine. So I think it might be an issue with onclick (my button has onclick="download()"), so I use JavaScript to add in the click event instead.
$("#download").onclick=download()
Note: $() is a custom jQuery-esque function without using the framework itself. It's worked on a lot of other uses at the same time as this problem.
But that doesn't work either. So I also try using
$("#download").addEventListener("click", download)
That yet again doesn't work. Both times it said that $() was null. So I go out on a limb, and try using
document.getElementById("download").onclick=download()
and the same with addEventListener(). But that gives me a very surprising error message:
TypeError: document.getElementById(...) is null
I've repeated all expressions in the console and found that they aren't null. I don't click the button until the page has been loaded very several seconds.
Here is the pertinent code:
function $(el){switch(el[0]){case"#":return document.getElementById(el.substring(1));break;case".":return document.getElementsByClassName(el.substring(1));break;default:return document.getElementsByTagName(el);break;}}
function download() {
alert("download() executed")
}
// Attempted Scripts:
//$("#download").onclick = download()
//$("#download").addEventListener("click", download)
//document.getElementById("download").onclick = download()
//document.getElementById("download").addEventListener("click", download)
<a class = "nav-link nohighlight" id = "download" onclick = "download()">Download</a>
It feels like my web browser is just trying to ensure I don't run the function. I've tested this on the latest Edge and Firefox. You can see my full page here.
Look at where your script tag is in your HTML: it's above the body. Scripts by default run immediately: when the HTML parser runs across them, it immediately executes the script before moving on to parse the rest of the HTML. So, at the time your script runs, none of your elements have been created yet - so, selecting any element will fail.
Either wrap your entire script in a DOMContentLoaded listener function:
document.addEventListener('DOMContentLoaded', () => {
// put your whole script here
});
Or give your script tag the defer attribute, which directs the parser to run it only once the document has been fully parsed:
<script src = "index.js" defer></script>

Prevent copy on an empty iFrame (GWT RichTextArea)

I am required to prevent copy from a form. Using a oncopy handler works just fine on all <input/>-type fields.
Yet I fail to apply it to our "richtextarea", which is basically an empty iframe (src="about:blank" for what I have been able to gather; the page is GWT-generated, and the people before me developped quite an extensive framework around it).
I am able to get the iframe in the JavaScript, but I fail to have a correct handler (I tried adding one that logs, but it never does).
I have tried frame.oncopy, frame.contentWindow.oncopy, frame.contentWindow.document.oncopy, frame.contentDocument.oncopy. None of these does log to the console when I copy the iframe's content.
Does somebody have any lead for me? Any help appreciated (I've been stuck on this for some days now).
Having a cross-compatible solution would of course be ideal, but the main target is Firefox (the page is only open via a custom container based on Firefox 10).
Edit 2015-03-24
For those who want to try some debug script, the component I have trouble with is the one demonstrated here.
I have some native methods in the Java project to execute some custom JavaScript on it.
Below is some of the JavaScript I have unsuccessfully tried.
var frame = document.getElementsByTagName('iframe')[0];
function disallowCopy() {
alert('Gotcha!');
return false;
}
frame.oncopy = disallowCopy;
frame.contentWindow.oncopy = disallowCopy;
frame.contentWindow.document.oncopy = disallowCopy;
frame.contentWindow.document.body.oncopy = disallowCopy;
frame.contentDocument.oncopy = disallowCopy;
even though oncopy is a non standard event https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy and that there is no reliable way to prevent copying text,
you can check out the following bin
ensure the frame is loaded
use iframe.contentDocument.body to attch the event

How to make a popup ride over a html page using chrome extension?

Just like Pocket chrome app does it, where when you save a page, it shows a drag down/popup that shows that you've added the link to Pocket.
How is it possible to achieve something similar?
To give a visual example:
You can use Programmatic Injection to inject and execute some JS code that modifies the web-pages DOM apropriately.
// In `background.js`:
...
var jsCode = [
"var div = document.createElement('div');",
"div.innerHTML = '...';",
"div.style.position = 'fixed';",
"div.style.zIndex = '9999';",
"document.body.appendChild(div);"
].join("\n");
function injectPopover(tabId) {
chrome.tabs.executeScript(tabId, {
code: jsCode
});
}
You will, also, need to set the necessary permissions in your menifest.json depending on when/how you want your popover to be triggered (and on what web-pages).
If you are not familiar with the basic concepts of Chrome Extensions, the Getting-Started Guide it the place to...start.

IE8 debugging ASCX component doesn't show correct location in javascript code when it stops

I have an ASCX component that has a lot of javascript declared in a script tag in the ascx itself. I can set breakpoints, and the debugger stops as it should, but the text that is highlighted in the debugger as the "current line" is nowhere near the actual javascript (it is much higher in the rendered file than it should be). I can "wing it" for one or two lines with the real code side-by-side with the "false" line of execution, but I lose all the hover abilities and everything else that makes javascript debugging useful.
I have tried putting the script at the top of my ascx file, but to no avail. I've tried not setting a breakpoint until the entire page is rendered, so that I have to scroll all the way to where the actual lines of code are, and the debugger still stops somewhere way above it.
Has anyone else seen this or no how to get around it?
Please don't answer with suggestions about using a different browser. This site doesn't work except in IE7 and IE8.
Thanks!
Finally!!!
I have been looking for a solution to this question for MONTHS!
This worked for me:
<script type="text/javascript" language="javascript">
debugger
function ThrowError() {
$(function () {
$.openDOMWindow({
loader: 0,
width: 500,
height: 250,
windowSourceID: '#ErrorAlert'
});
return false;
});
}
function CloseError() {
$(function () {
$.closeDOMWindow({});
return false;
});
}
if ("False" == "True") ThrowError();
</script>
I don't know if I'm using it correctly, but it seems to give me what I need.
Thank you!!
Move the script to an external JS file.
(This is good practice anyway)
I'm dealing with the same issue as you're. I can't move the js code to an external JS (because the guy who wrote the code is using the variables of .cs with <%= var %>. The simplest solution that i've found is write debugger; wherever you want the browser to start debugging the script.

Categories