Develop Reference

Use Javascript to change the elements in an IFRAME, or spot the bug in this code, please

I'm trying to change the elements in an I frame using
JavaScript and it is not working!
I have used it before to do this just not within an Iframe.
Console says Uncaught TypeError: Cannot read property 'textContent' of null
at HTMLIFrameElement.iframe.onload
$( document ) .ready (function() {
var iframe = document.getElementById("<%= iframeID.ClientID%>");
iframe.onload = function () {
console.log("Loaded");
var doc = iframe.contentWindow.document;
console.log(doc.getElementsByClassName("fc-title"));
console.log(doc.getElementsByClassName("fc-title").item(0).textContent);
var ele = doc.getElementsByClassName("fc-title");
for (var i = 0; i < ele.length; i++) {
console.log(ele[i].textContent || ele[i].innerText);
}
}
})

Every function in seperated js files but included only if used

Hey all im trying something (because im boring) every function as js files can be used but if only needed file will bi apended. so i have write something like this. some parts from this site.
library.js:
var jsfiles = new Array(
"jsLibrary/try.js",
"jsLibrary/try2.js"
);
var loadedJsFiles = [];
function loadFile(filepath,callback){
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = filepath;
script.onreadystatechange = callback;
script.onload = callback;
head.appendChild(script);
}
function loadalljs(callback,jsnum){
if(!jsnum){jsnum = 0;}
if(jsnum<jsfiles.length){
if(!isArrayNode(jsfiles[jsnum],loadedJsFiles)){
loadedJsFiles.push(jsfiles[jsnum]);
loadFile(jsfiles[jsnum],function(){
loadalljs(callback,jsnum+1);
});
}else{
loadalljs(callback,jsnum+1);
}
}else if(jsnum==jsfiles.length){
callback();
}
}
function isArrayNode(str, arr) {
for (var i = 0; i < arr.length; i++) {
if (str == arr[i]) {
return true;
}
}
return false;
}
function lb(){
this.scripts = function(callback,includePageJs){
loadalljs(function(){
if(includePageJs){
loadFile(includePageJs,function(){
callback();
})
}else{
callback();
}
});
};
this.a = 5;
}
var library = new lb;
try.js:
function tryfunction(){
alert("try");
}
try2.js:
function try2(){
alert("try2");
}
mypage.js:
function mypagefunction(){
alert("mypagejs");
}
and im using it like this:
<script type="text/javascript" src="jsLibrary/library.js"></script>
<script>
library.scripts(function(){
tryfunction();
try2();
mypagefunction();
},"jsLibrary/mypagejs.js");
library.scripts(function(){
alert(library.a)
});
</script>
is there any way to do this with easy way? thanks for any idea or help. (Not in jquery please)

Use Requirejs
<script>
requirejs.config({
paths: {
'try1': '../path_to_your_try.js',
'try2': '../path_to_your_try2.js',
'mypage': '../path_to_your_mypage.js',
}
});
require([
'try1', 'try2', 'mypage'
], function(Try1, Try2, MyPage){
// Try1 refer to try1 file
// Try2 refer to try2 file
// MyPage refer to mypage file
});
</script>

call jquery function after page load not working - Firefox extension

I've been working on Create Firefox extension. i can inject some js file for all webpages. this function works fine.
codevar myExtension = {
init: function() {
// The event can be DOMContentLoaded, pageshow, pagehide, load or unload.
if(gBrowser) gBrowser.addEventListener("DOMContentLoaded", this.onPageLoad, false);
},
onPageLoad: function(aEvent) {
if ((aEvent.originalTarget.nodeName == '#document') &&
(aEvent.originalTarget.defaultView.location.href == gBrowser.currentURI.spec))
{
//alert('loaded');
var htmlns = "http://www.w3.org/1999/xhtml";
var doc = gBrowser.selectedBrowser.contentDocument;
var filerefs = doc.createElementNS(htmlns,'script');
filerefs.setAttribute("type","text/javascript");
filerefs.setAttribute("src", "http://code.jquery.com/jquery-1.9.1.min.js");
doc.getElementsByTagName("head")[0].appendChild(filerefs);
var filerefst = doc.createElementNS(htmlns,'script');
filerefst.setAttribute("type","text/javascript");
filerefst.setAttribute("src", url+"js/tipped/tipped.js");
doc.getElementsByTagName("head")[0].appendChild(filerefst);
filerefst.setAttribute(tripnow());
}
}
}
function tripnow()
{
//function working fine
var j = $.noConflict();
var imageslist = j('img');
var output = '';
// count image using jquery its not working
alert(imageslist.length);
for (var i = 0, len = imageslist.length; i < len; i++) {
var images = j(imageslist).attr('src');
//alert(images)
Tipped.create(imageslist[i], "htmlphp.php?id="+i,
{
ajax: true,
skin: 'white',
hook: 'topleft',
afterUpdate: function()
{
Cufon.replace('.HummingbirdDemo h1.museo');
}
});
}
}
window.addEventListener("load", function load(event){
window.removeEventListener("load", load, false); //remove listener, no longer needed
myExtension.init();
},false);
I want to call my function after script loads. my function call working fine but my inner function script are in jquery its not working.
Main Problem : I want count current page img tags using jquery
Please advise

To interact with the page in addon-sdk, you have to use a content script. and you can use jquery on those, but not the way are using it. See Content Scripts

Changing erik vold toolbarbutton image on the fly

I'm trying to make a firefox extension with the SDK. (if I can avoid XUL i'm happy)
I'm using erik vold toolbarbutton
But I need to change the toolbar image on the fly.
My lib/main.js (background page) is :
var tbb = require("toolbarbutton").ToolbarButton({
id: "My-button",
label: "My menu",
image: Data.url('off.png'),
onCommand: function(){
Tabs.open(Data.url("signin.html"));
}
});
tbb.setIcon({image:Data.url('on.png')});
console.log(tbb.image);
tbb.moveTo({
toolbarID: "nav-bar",
forceMove: false // only move once
});
tbb.image is correct, but the button isn't refreshed.
I tried to change packages/toolbarbutton-jplib/lib/toolbarbutton.js
function setIcon(aOptions) {
options.image = aOptions.image || aOptions.url;
getToolbarButtons(function(tbb) {
tbb.image = options.image;
tbb.setAttribute("image", options.image); // added line
}, options.id);
return options.image;
}
But it doesn't seem to refresh...
Is erik vold lib enough for this kind of need ?

also be sure to update with this fix https://github.com/voldsoftware/toolbarbutton-jplib/pull/13/files

there is a setIcon method and a image setter that you can use to update the toolbar button's image

I had the same problem so I just wrote the code my self using this tutorial:
http://kendsnyder.com/posts/firefox-extensions-add-button-to-nav-bar
Try this, I rewrote my code to fit your needs:
var btn = null;
var btnId = 'My-button';
var btnLabel = 'My menu';
var btnIconOn = 'on.png';
var btnIconOff = 'off.png';
var {Cc, Ci} = require('chrome');
var self = require("sdk/self");
var mediator = Cc['#mozilla.org/appshell/window-mediator;1'].getService(Ci.nsIWindowMediator);
// exports.main is called when extension is installed or re-enabled
exports.main = function(options, callbacks) {
btn = addToolbarButton();
// do other stuff
};
// exports.onUnload is called when Firefox starts and when the extension is disabled or uninstalled
exports.onUnload = function(reason) {
removeToolbarButton();
// do other stuff
};
// add our button
function addToolbarButton() {
// this document is an XUL document
var document = mediator.getMostRecentWindow('navigator:browser').document;
var navBar = document.getElementById('nav-bar');
if (!navBar) {
return;
}
var btn = document.createElement('toolbarbutton');
btn.setAttribute('id', btnId);
btn.setAttribute('type', 'button');
// the toolbarbutton-1 class makes it look like a traditional button
btn.setAttribute('class', 'toolbarbutton-1');
// the data.url is relative to the data folder
btn.setAttribute('image', self.data.url(btnIconOff));
btn.setAttribute('orient', 'horizontal');
// this text will be shown when the toolbar is set to text or text and iconss
btn.setAttribute('label', btnLabel);
navBar.appendChild(btn);
return btn;
}
function removeToolbarButton() {
// this document is an XUL document
var document = mediator.getMostRecentWindow('navigator:browser').document;
var navBar = document.getElementById('nav-bar');
var btn = document.getElementById(btnId);
if (navBar && btn) {
navBar.removeChild(btn);
}
}
btn.addEventListener('click', function() {
Tabs.open(Data.url("signin.html"));
}, false);
tbb.setIcon({image:self.data.url(btnIconOn)});

Document.body in Opera

I've got a problem with retrieving link to the body tag. I've tried:
document.body, unfortunately it is null
search body by tagName while enumerating childs of document, it's found only the head tag :(
document.getElementsByTagName, return undefined
I'm trying to get link to the body tag in onload event handler. This is a HTML code of the page:
<html>
<head>
<title>Some page</title>
<script src="/adv.js" type="text/javascript"></script>
</head>
<body>
This is text
</body>
</html>
Here the source code of adv.js:
(function () {
var myRandom = function (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
var myFunction = function () {
var newScriptAddr = '/adLoader.js?r=' + myRandom(1,1000000);
var fileref = document.createElement('script');
if (typeof fileref != "undefined")
{
fileref.setAttribute("type", "text/javascript");
fileref.setAttribute("src", newScriptAddr);
document.getElementsByTagName("head")[0].appendChild(fileref);
}
};
if (window.onload)
{
var currOnLoad = window.onload;
window.onload = function () {
currOnLoad();
myFunction();
};
}
else
window.onload = myFunction();
}) ();
Source code of adLoader.js:
(function () {
var mainCnt = document.createElement('div');
mainCnt.appendChild(document.createTextNode('The text'));
var _body = document.body;
if (!_body)
{
var htmlTag = document.documentElement;
for(var i = 0; i < htmlTag.childNodes.length; i++)
{
if (htmlTag.childNodes[i].nodeName.toLowerCase() == 'body')
{
_body = htmlTag.childNodes[i];
break;
}
}
}
if (!_body)
_body = document.getElementsByTagName('BODY') [0];
if (!_body)
_body = document.getElementsByTagName('body') [0];
if (_body)
_body.appendChild(mainCnt);
else
alert('WTF!!');
}) ();
Browser is Opera 11.10 OS Ubuntu Linux. Is there way to get this link? My aim is to add div with position:fixed to the body tag.

myFunction() doesn't return a function, so you are assigning undefined to window.onload. You probably mean window.onload = myFunction;
Anyway, as written at the moment, the code runs immediately and the body element hasn't been reached.

if the js code in head tag and the query the body tag before onload event, null should be got while browser just reading the head.