I am using a frames page, which contains the following Javascript line:
top.contentsFrame.location.replace("/main.jsp");
I want to run this page both inside an iFrame, as well as independenty.
In an iFrame it doesn't work, because the top attribute now returns the iFrame. So it can't find "contentsFrame" anymore.
What would be the easiest way to fix this?
Cheers!
you should use
parent.top.location.replace("/main.jsp");
Related
I wonder if it is possible to get the page title of an url within IFRAME. I tried to use jQuery $('#iframe').attr('title') but that doesn't work. Please help. Thanks.
I think this is what you're looking for:
$(document).ready(function()
{
alert($('#iframe').contents().find("title").text());
});
That will return the page title that is located in the <title> tag of the iframe document that has the id "iframe".
I misread your question.
$('title', frames[frameName].document).text();
If what you are looking for is a way to get the URL of the iframe after the user has clicked on a link within that iframe, this is not possible in any modern browser that blocks cross-domain attempts.
Even though the iframe is part of the DOM and you can easily find the new iframe URL using apps like Firebug, Firefox will throw a XSS error on any attempts by js to directly pull that info.
But for the record, as it's already been said, the location within the DOM of the actual URL of the iframe content is (with a little help from jquery) : $("#id_of_iframe).contentDocument.location.href
I'm not totally sure if the above points straight to it with the above syntax, but that's the gist of it. The part that is a no-no is trying to go inside that contentDocument part.
When I go to the JSFiddle embedded full screen view (<url of fiddle>/embedded/result), there is always a bar at the top with JSFiddle on it, as shown here with where it says result:
Is there a way to remove this bar from the view?
Note:
You can also access this view by going to URL <url of fiddle>/show.
Before you read, please note that jsfiddle is a nice site and they do this so that people can't just use them for hosting and then embed their links.
Consider that before removing all their branding - don't be a jerk.
I don't know if they've changed this since Noel's answer, but it still shows the bar at the top for me.
It can still be done though.
Example:
https://fiddle.jshell.net/vmt32w4d/11/show/
The trick is to find the source of the iframe which is on fiddle.jshell.net as Noel suggests.
They keep this on a separate origin to give you a cross-origin exception if you try to access elements outside of the iframe.
This is no problem, just link to that instead and add the following code:
$("header",window.parent.document).remove();
$("#tabs",window.parent.document).css({
'margin-top':'0px',
'height':'100vh'
});
$("#result",window.parent.document).css({
'margin-top':'0px',
'height':'100vh'
});
I included the jquery library for this to work - otherwise you could just edit the code to alter the css using vanilla JS.
There may be a better way to alter the css or whatever, but now you know how to do so 🙂
The embedded fiddle is just an iframe within another iframe. You can take the source from the child iframe and replace the parent one with it.
Starting from the */embedded/result url like in the image.
Inspect the parent iFrame with Dev Tools.
Copy the child iFrame source link (looks like '/fiddle.jshell.net/blah/blah/show/light/').
Replace the parent embed source link with the copied one.
That should do it. Worked for me.
I have a page with an iframe. The two sites (parent site is php, child site is asp.net 2.0) are on different domains, although I control both of them. Most of the work is done within the iframe. I am using the postMessage function to send information about the total height of the content in the iframe. However, it always comes up as 0, I guess because the script executes before everything is laid out on the screen. Is there a way I can obtain the total height (I think it's scrollHeight, right?) of the child site so that I can send it to the parent?
Thanks!
so you want the parent to adjust the size of iFrame when you got o another page etc.. so suppose your using jquery as the JS lib you can try this trick. in the parent.html do this
$(document).bind('atriggerMessage', function(e) {
//do the iframe size change or other stuff
});
then within the iframe you need to trigger the event. so in the iframe.html
parent.$(parent.document).trigger("atriggerMessage");
I wanted to post my solution in case someone else comes across the same issue.
I ended up putting javascript code in the html markup almost right before the closing tag. This ensured that the page was visible before the body.scrollHeight was called. I don't understand why the body.scrollHeight inside window.onload() or body.onload or $(document).ready() as #shakirthow said above.
I have included JQuery on my main page which is a html page, in the main page there is an iFrame and in the iFrame I am calling another HTML page. I want to use jquery in the html page which is being called in the iFrame, is it possible to use the JQuery which is included in the main page? if it is then please let me know how?
Are the pages in the same domain? (Same origin policy.)
If so then from the iframe do parent.$(xxx) but be aware the jquery will be manipulating the top level document! Not the iframe!
If you want to manipulate the iframe do $(xxxx, $('iframe').contents()) - i.e. you set the context to the iframe, then use jQuery like usual. You would probably want to set $('iframe').contents() to a variable - and if you have more than one iframe give them an ID so jquery can find the right one.
I wonder if it is possible to get the page title of an url within IFRAME. I tried to use jQuery $('#iframe').attr('title') but that doesn't work. Please help. Thanks.
I think this is what you're looking for:
$(document).ready(function()
{
alert($('#iframe').contents().find("title").text());
});
That will return the page title that is located in the <title> tag of the iframe document that has the id "iframe".
I misread your question.
$('title', frames[frameName].document).text();
If what you are looking for is a way to get the URL of the iframe after the user has clicked on a link within that iframe, this is not possible in any modern browser that blocks cross-domain attempts.
Even though the iframe is part of the DOM and you can easily find the new iframe URL using apps like Firebug, Firefox will throw a XSS error on any attempts by js to directly pull that info.
But for the record, as it's already been said, the location within the DOM of the actual URL of the iframe content is (with a little help from jquery) : $("#id_of_iframe).contentDocument.location.href
I'm not totally sure if the above points straight to it with the above syntax, but that's the gist of it. The part that is a no-no is trying to go inside that contentDocument part.