Similar to Firebug Inspect I have a block of code to read the DOM and upon mouseover highlight the current element, and upon click to print out that current element's DOM location. See demo:
http://jsfiddle.net/94EaH/4/
I'm trying to modify the code to work on the content within an iframe. I don't want it to work on the current page AND iframe's DOM, because I know that won't work. I want to change the selector the code is bound to, to be the iframe. The iframe is of course embedded within a page, but only the iframe's DOM is being analyzed.
I can manipulate the parent through the iframe like this:
<iframe id="testFrame" src="blah.html" width="200px" height="200px"></iframe>
<div id="testBox">text text text</div>
$("#testFrame").contents().bind("click", function() {
$('#testBox').css('color', 'green');
});
But if I add one more line to modify the content of a DIV inside the iframe.. nothing.
$("#testFrame").contents().bind("click", function() {
$('#testBox').css('color', 'green');
$('#iframeDiv').css('color', 'red'); //this produces no result
console.log(event.target); // I get no information out of this also..
});
http://jsfiddle.net/94EaH/3/
It's difficult to show full functionality, since blah.html (iframe source) can't be displayed on jsfiddle..
Any ideas on how I could extend this functionality to an iframe's DOM instead of the #container element of the current page I've used in the example?
The iframe file is on the same server, so no security issues
If you're trying to access an element in an Iframe with jQuery from the parent window, then you've got a problem. Imagine you've got a iframe. Inside the iframe, there's a div with id 'container'. If you do this from the parent document, $('#container'), you'll find the jQuery object is empty.
jQuery is bound to the window and document objects of the page in which it is declared (loaded). It does no matter that you're constructing it from an event handler bound to the iframe, the $ function you're using still belongs to the parent window. If you load jQuery in the iframe's page, however, you could get references to the objects like this:
$('#testFrame')[0].contentWindow.$('#container');
Here, the first '$' and the second '$' do not refer to the same jQuery constructor.
Edited I forgot the [0] to access the first iframe in the jQuery object.
I hope this helps you.
Related
I'm working within a setup that I have no control over:
Parent->Iframe->Iframe->My document
How do I access an element that is on the parent from within my document?
These are all on the same domain, so no cross-domain issues. I can do this with either straight up JS or jQuery.
I've been searching around, but haven't found any examples of someone trying to access an element on the top from the bottom through multiple iframes!
The solution, in case anyone else comes across this:
var p = $("#Viewport",window.top.document);
alert(p.attr('name'));
Just use window.top, like:
console.log(top.document.getElementById('someInputId').value);
Notice that window in implicit, so you can leave it off. Of course, you will have to change 'someInputId' to an input id on your top page to see if this works. Use .innerHTML instead of .value if you are testing against an Element that is not an input.
I believe you will be able to access this via window.parent, as thus:
window.parent.document.getElementById('target-element');
Is it possible to access the jQuery lib from an iframe, when it's included in the parent window only? I have a parent window which loads (sometimes hundreds) of iframes. In each iframe I want to execute some jQuery functions. I can only get this working if I define the lib in each iframe, using :
<script src="/jquery.min.js" type="text/javascript"></script>
However, I would prefer, for faster loading, that I include the above script tag only in the parent window, then from each child/iframe access the parent's library to execute a function that affects the iframe.
Thanks for the response. Here is what I have in the child frame :
<script>
var $ = parent.jQuery;
$(this, document).ready(function(){
var step = 0.2;
$('body', document).css('MozTransform','scale(0.2)');
});
</script>
And what I'd expect is that once the child's doc is "ready" it would shrink itself down to 20%. Except its not working. Is it possible, or should I try add the child's code to the parent doc and assign ids to each frame, then loop through them.
Using
$( document ).ready(function(){
$('body').css('MozTransform','scale('
results in the parent window scaling down. I'm wanting to scale down the iframe.
Assuming the iframes are in the same domain as the parent document, you can easily get a reference to the parent window's jQuery:
var $ = parent.jQuery;
Or if you have iframes nested more than one level deep:
var $ = top.jQuery;
However, jQuery by default will only query the document from where it was included. In case you need to query the given iframe's DOM, you have two options:
Pass document, which in this case points to the given iframe's window.document, as context:
$('#elementInsideIframe', document).doSomething();
Or, store a jQuery object containing the iframe's document and .find() its descendants.
var $dom = $(document);
$dom.find('#elementInsideIframe').doSomething();
Live demo
Parent window
iframe contents
Despite what others say, caching is not "good enough" for your use case. jQuery has quite some init overhead and it is something that you do not want to include hundreds of times.
As per OP update:
Just use $(document).ready() inside the frames. In an (i)frame context, document points to the given frame's window.document.
Also, if you're using jQuery >= 1.8, you don't need to use vendor prefixes - jQuery will use the appropriate vendor-prefixed property in case the standard one is not supported.
Demo: parent, iframe
The overhead of jerking around with the html-code of a parent window or top window will cost more than the extra line of script to to load jquery as you should.
Load it individually in each frame, possibly use an online version of jquery, this will increase the chanses of the client having the library loaded before entering your site.
In example
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
I'm using a nifty little script called Tabifier (http://www.barelyfitz.com/projects/tabber/)
Now, long story short, this script, which I run in my head tag, creates a <ul> with <li>s containing <a>s. Also in the head tag it creates IDs for these <a>s. When I inspect the loaded site I can clearly see the ID tags present. However, I cannot call them using getElementById. I've been using
<script>
document.getElementById('rightpanelnav1').style.padding='200px';
</script>
as a sample script in different parts of my code but to no avail. I'm wondering wether it's the placement or order in which these things are defined in my code that's causing it not to recognize the ID. What do you think?
EDIT: I recieved a great answer below, but I still can't get 'rightpanelnav1' to register onclick events...? It's an , there shouldn't be a problem, right? And when I click it, the entire page has been loaded for several seconds...
Firstly, in order to access an element in the DOM, the element must be a part of the DOM (document). So if you place your <script> with getElementById in the page at a place prior to where the element is loaded, it will not see the element in the DOM.
Secondly, it is highly probable that this library you use does its modification on page load, which would mean that no matter where you place your <script> it would have no chance of seeing these elements before running.
As a result, you should have your script wait as well, and do this:
window.onload = function(){
document.getElementById('rightpanelnav1').style.padding='200px';
};
Or for a click event
window.onload = function(){
document.getElementById('rightpanelnav1').onclick = function(){
alert("clicked!");
};
};
I have an iFrame in a html page myPage.html where I am displaying another page otherPage.html. otherPage.html is a complicated page with many elements. I want to display only one div in the iFrame. All the others should remain hidden. How can I do this?
Instead of the iFrame, I tried to use the .load() function in jQuery. But for some reason, the page does not load. The otherPage.html is served from an IIS server and the page is constructed from purely Javascript. I have no idea why nothing is loading when I use the load() function.
How would I go about achieving this?
Update:
Here are some clarifications:
I tried to use the .load() function on myPage.html. Anyway, after fiddling around, I found the following to work:
For the div that I want to show, I hide all its siblings and also hide all the siblings of its parent. The following jQuery statement seems to do this:
$("#myFrame").contents().find("#chart1").show().parentsUntil('body').andSelf().siblings().hide();
I have only one issue now. When I do the following:
Load myPage.html in Firefox (It also loads otherPage.html in an
Iframe)
Manually open firebug and type
$("#myFrame").contents().find("#chart1").show().parentsUntil('body').andSelf().siblings().hide();
it seems to hide everything else.
But then I want to automate it. In other words, when I load myPage.html I want it to load the contents of the iFrame. Once the iFrame contents are loaded I want to then run this script:
$("#myFrame").contents().find("#chart1").show().parentsUntil('body').andSelf().siblings().hide();
I cannot get this to work. I have tried these two approaches so far:
$(document).ready(function() {
$("#myFrame").ready(function () {
$("#myFrame").contents().find("#chart1").show().parentsUntil('body').andSelf().siblings().hide();
});
});
I have also tried to use
$("#myFrame").load(function () {
instead. But in both these cases the script does not hide the other elements. Since, the script works when I use it manually in the console, I assume that somehow it is running before all the elements are loaded. Please give me your thoughts.
Hide everything within the iFrame by something like $("#myIFrame *").hide(); or you can set the css display property to none.
Using CSS selector, re-display only the div you want. If your div has an id this is pretty easy : $('#myDiv').show();
If the div does not have an id, see if you can give it one. If creating an id for your div is not an option, try to give its parent an id/class.
If ID is not an option you may also find selectors like :nth-child() useful.
You say you are using the load() function. Are you using this in the parent page or the iframe page? Do you really mean to use the ready() function instead?
$(document).ready(function(){
// some code here ...
});
Using ready() on the document will ensure that the DOM elements have completely loaded, and then will execute the code in the handler. Without more information I'm not sure I can help much with what you're trying here.
Using an iframe you should first remember that if you want only one div to be visible and all others to be hidden you must make sure that the "visible" div is not inside an "invisible" container. If the container is hidden, all children will be hidden too.
If you had a div "showme", then something like this would work:
<div id="showme">visible text</div>
<div style="display:none;">hidden text</div>
But doing it this way, everything would be hidden:
<div style="display:none;">
hidden text
<div id="showme">supposed to be visible, but hidden!!</div>
</div>
If you are changing the visibility, or display, of an element you can do it in the iframe page like this:
// using jQuery...
// set the display css to an empty string, defaulting to visible (not 'none')
$('#showme').css('display','');
// set other elements to be hidden...
$('#hideme1').css('display','none');
$('#hideme2').css('display','none');
$('#hideme3').css('display','none');
If you want to change the visibility of elements from the PARENT page you first access the iframe, then change the elements within it:
// using jQuery...
// get the iframe. ps. you dont have to put the $ in front of the variable name.
// I chose to do it this way to remind myself it's a jQuery object.
var $f = $('#myiframe').contents();
// set the display css to an empty string, defaulting to visible (not 'none')
$f.find('#showme').css('display','');
// set other elements to be hidden...
$f.find('#hideme1').css('display','none');
$f.find('#hideme2').css('display','none');
$f.find('#hideme3').css('display','none');
See this article for example(s) on working with elements in a child iframe:
http://www.computerhowtoguy.com/jquery-and-iframes/
As I understood your question. You can do like this, pass div id to get displayed as hash in your otherPage.html url like you have a div with id first, you can pass first as hash
<iframe src="otherPage.html#first" />
and in otherPage.html, you can get this hash and according to that show your div, but make first all your sections hidden, using css will be easy, only add "display:none;" in css.
and try this : in otherPage.html
$(function(){
//var divToShow = location.hash.subString(1);
//$('#'+divToShow).show();
var divToShow = location.hash;
$(divToShow).show();
});
onmouseover="javascript:parent.DivColorHover(this)"
i have a div in which values are created dynamically, i use this div as popup so that it will be used as dropdown list elements.
onMouseOver of each value i am changing background color using the above line of code in javascript. how do i achieve the same in jquery
Let's first look at the code that you are using.
The javascript: protocol is out of place (it's used when code is placed in an URL) so it just becomes an unused label.
The parent object is a reference to the page that contains the iframe that the current page is in. As you are probably not in an iframe but a regular page, it will just be a reference to the current page.
So, all that is left of the code is actually:
onmouseover="DivColorHover(this)"
To add the same event using jQuery you need some way to identify the element, for example by adding an id="something", then you can do this:
$(function(){
$('#something').mouseover(function(){
DivColorHover(this);
});
});
jQuery(document).ready(function(){
$("#yourid").mouseover(function() {
$("#yourid").parent().css("backgroundColour":"red");
}
}
When html loaded jquery binds the defined function to the mouseover event of element with id="yourid".
This way you keep behaviour (event handlers) and structure (html) separate, easier to understand (for me at least).