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';
Related
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.
I have seen this question many times, and a lot of the answers seem to suggest the base target="_blank" technique. However, I have used this before in the past; but my current page it does not work. I also don't think it could be best option even if it did work; as I ONLY want the links within the iframe src="" to open in a new window. I am hopping there's a simple solution I can add inline to the page. I have also tried adding an id as below, and using JavaScript, still nada.
<iframe src="mywordpressfeed.html" id="frame1" width="310" height="380"></iframe>
JS
$(document).ready(function(){
$("#frame1").attr("target","_blank");
});
Basically the goal is to when a user sees my wordpress feed within the iframe I have on a static page; once the post title is clicked it loads in a new window - as now it loads within the same iframe so there isn't an increased level of readability.
There is no real solution to this, due to the iFrame tag being developed for the opposite.
//pass the iframe to this iframe getting function
function iframeRef( frameRef ) {
return frameRef.contentWindow ? frameRef.contentWindow.document : frameRef.contentDocument
}
//Get Iframe
var inside = iframeRef( document.getElementById('iframeID') );
//Get all links
var links = inside.getElementsByTagName('a');
//Loop throught links and set their attributes
for (var i = 0 ; i<links.length ; i++){
links[i].setAttribute('target','_blank');
}
//No jQuery needed!
thanks to meder
EDIT
Due to iframe same source restrictions I had to find a website with inner iframe from same source so you can paste this code
//pass the iframe to this iframe getting function
function iframeRef( frameRef ) {
return frameRef.contentWindow ? frameRef.contentWindow.document : frameRef.contentDocument
}
//Get Iframe
var inside = iframeRef( document.getElementById('IFwinEdit_Gadget_247730_3349') );
//Get all links
var links = inside.getElementsByTagName('input');
//Loop throught links and set their attributes
for (var i = 0 ; i<links.length ; i++){
links[i].setAttribute('style','background:red');
}
//No jQuery needed!
to the console in this web site and see the inputs change color
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);
});
i want to get spesific contents (all of spans in .y6) in iframe without jQuery,
How can i write it only javascript?
"#canvas_frame" is an iframe
spans = $("#canvas_frame").contents().find(".y6>span");
If the iframe is on the same domain as the parent page you can use the iframe's contentWindow property.
Something like the below should help you out:
var canvasFrame = document.getElementById('canvas_frame').contentWindow,
allSpans = canvasFrame.document.getElementsByTagName('span'),
spans = [],
i;
i = allSpans.length;
while(i--){
if(/y6/.test(allSpans[i].parentNode.className)){
spans.push(allSpans[i]);
}
}
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';