We Keep Coding

get a dynamic id from an iframe in an iframe

I am actually doing a tricky task, I have to create pack of resource(which are pages on the website), to do so I use iframe to display the content of the pages. But I can have multiples Iframes in one Iframe.
And I want to pass some style on those iframe in iframe, so i have to target them.
I have a special node id for each pages that allow me to return only the body.
So my question is how do I get to target the id of my iframe in my iframe which I tried to do with that line var get_iframe_inside = search_inside.getElementsByTagName("iframe".id); to then modify it's style.
I know that I am not using the right way for this line, but I have been scratching my head all this morning and can't find a way.
function test(id){
var iframe = window.parent.document.getElementById(id); //select my first iframe
get_iframe_inside(id); //call my function to get the iframe in the iframe
function get_iframe_inside (id){
var search_inside = (iframe.contentDocument) ?iframe.contentDocument : iframe.contentWindow.document;
//My goal is then to modify some properties
var get_iframe_inside = search_inside.getElementsByTagName("iframe".id);
$(get_iframe_inside).css({'padding':'0px 50px', 'background-color':'#cecece'});
}
}

Well it was kind of trivial my code was nearly working i just didn't tought at how to get thoses ids.
i just had to get them by tag and after that to do an iteration with for.
var get_iframe_inside = search_inside.getElementsByTagName("iframe");
var i;
for (i = 0; i < get_iframe_inside.length; i++){
get_iframe_inside[i].style.padding='0px 50px';

How to enable the design mode of iframe?

I have tried to edit div text which I open in an iFrame like this:
$(function() {
var iframeBody = $("#texteditor").contents().find("body");
var styleTag = iframeBody.append($('#content'));
iframeBody.designMode = "on";
})
and the page look llike this:
I am trying to edit the text, but it's not working

Try instead
var iframe = $("#texteditor <iframe-selector>");
var jqIframeBody = $(iframe[0].contentDocument.body);
Basically you cannot write a absolute selector starts from your parent window contents, you need to first get into the context (window/document) of iframe and then perform dom operations, or messaging through 1postMessage` however you want.

Acess iframe content (in firefox plugin javascript)

I'm writing a firefox plugin who open an iframe in webpages. I want to select object in the iframe, but i can't access content:
var iframe = content.document.getElementById("MyBeautifulIframe");
if (iframe)
{
var mydiv = iframe.contentDocument.getElementById("mydiv");
}
Erreur : TypeError: iframe.contentDocument is undefined
I tryed with iframe.content.document.getElemen... , iframe.document.getElemen... same result.
How access iframe dom ? If i look iframe var type, it's [object XrayWrapper [object XULElement]], how access dom objects of XULElement object ?

Updated answer:
Took a look at your code and i think i may have found your problem.
You are doing:
var iframe = content.document.getElementById("muzich_iframe_addcontainer");
if (iframe)
{
if (iframe.contentDocument.getElementById("div"))
{
this.close_all();
}
}
muzich_iframe_addcontainer is a div, not the iframe, so it never has contentDocument.
Additionally, i couldn't make it work by creating xul elements. I had to create html div and iframe to make it work.
Here's the code:
var htmlns = "http://www.w3.org/1999/xhtml";
var container = document.createElementNS(htmlns,'div');
container.setAttribute("id", "muzich_iframe_addcontainer");
container.setAttribute("style", styleContainer); //styleContainer is the one you use without the background stuff
window.content.document.body.appendChild(container);
var iframe = document.createElementNS(htmlns,'iframe');
iframe.setAttribute("id", "muzich_iframe");
iframe.setAttribute("style",
"width: 100%; height: 100%; "
);
iframe.setAttribute("src", "http://www.lifehacker.com"); // Used it as my example url
window.content.document.getElementById("muzich_iframe_addcontainer").appendChild(iframe);
Then, when you want to check to close you do:
var iframe = window.content.document.getElementById("muzich_iframe");
if (iframe)
{
if (iframe.contentDocument.getElementById("div"))
{
this.close_all();
}
}
Hope this one solves it for you.

how to change the iframe?

I have 2 iframes in my page. Both have the same source. When I change the 1st iframe, the changes must be reflected in 2nd one. It looks like remote browsing. How can I achieve this in javascript?

var iframes = document.getElementsByTagName('iframe');
var src = iframes[0].src;
iframes[1].src = src;
Without knowing what your page does or seeing any code can't really give you more then this...

If you're using jQuery:
var frames = $('iframe');
frames.each(function() {
this.attr("src", yourUrl);
});

How to disable div blocks having a certain id pattern?

I would like to write a greasemonkey script to disable a div on a certain page.
On any given load of the page I don't know where in the DOM the div will be but I know it's always called <div id = "alertPanel"> ....</div>
How would I go about disabling this div?
My intial thoughts were something along the lines of:
var myDivs= document.getElementsByTagName('div');
for (i=0; i<myDivs.length; i++)
{
if (myDivs[i].<get id property somehow> = "alertPanel")
myDivs[i].style.visibility = 'hidden';
}
but as you can tell I'm stuck at accessing the id property for an equality check.
Incidently, I'm using a text editor to write this - I guessing that a standard javascript editor would give an autocompletion list after typing in myDivs[i].

If it has an id, you can use document.getElementById:
var div = document.getElementById("alertPanel");
Then if it exists, you can either remove it (probably a bad idea) or hide it:
if (div) {
div.style.display = "none"; // Hides it
// Or
// div.parentNode.removeChild(div); // Removes it entirely
}
Update: Re your comment on another answer:
thanks for your answer. Does your statemt apply to a page with iframes too. The div in question is in an iframe. I've tried ypur solution and it didn't work unfortunately. maybe a link to the page will help: tennis.betfair.com the div i want to disable is the one with id: minigamesContainer
If the element is in an iframe, then you have to call getElementById on the document that's in the iframe, since iframes are separate windows and have separate documents. If you know the id of the iframe, you can use document.getElementById to get the iframe instance, and then use contentDocument to access its document, and then use getElementById on that to get the "minigamesContainer" element:
var iframe, div;
iframe = document.getElementById("the_iframe_id");
if (iframe) {
try {
div = iframe.contentDocument.getElementById("minigamesContainer");
if (div) {
div.style.display = "none";
}
}
catch (e) {
}
}
(The try/catch is there because of a potential security error accessing the content of the iframe; I don't know Greasemonkey well enough to know whether the SOP applies to it. I tend to assume it doesn't, but better safe...)
If you don't know the id of the iframe or if it doesn't have one, you can just loop through all of them by getting them with document.getElementsByTagName and then looping:
var iframes, index, iframe, div;
iframes = document.getElementsByTagName("iframe");
for (index = 0; index < iframes.length; ++index) {
iframe = iframes[index];
try {
div = iframe.contentDocument.getElementById("minigamesContainer");
if (div) {
div.style.display = "none";
break;
}
}
catch (e) {
}
}
References:
DOM2 Core
DOM2 HTML
DOM3 Core
HTML5 Web Applications APIs

In valid HTML you can have only element with certain ID. So:
document.getElementById('alertPanel').style.visiblity = 'hidden';
But if you still need to iterate all div's and check their ID's, then this should work:
if (myDivs[i].id == "alertPanel") myDivs[i].style.visibility = 'hidden';