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.
Related
I've been searching for a while now, but I can't figure out how to load an entire page via AJAX and still execute all javascript and css.
Mostly I just end up with the plain text without any CSS.
Is there a way to do this? I tried jQuery.get, jQuery.load and jQuery.ajax, but none really work like that.
I have a different solution. You may try it with an iframe. Use jQuery to append an iframe script including all relevant codes into some part of your page (like some div). This may do it for you including CSS, like;
$('<iframe src="your_page.html"/>').appendTo('#your_div');
Or you may try something like;
$('<iframe src="your_page.html"/>').load(function(){
alert('the iframe is done loading');
}).appendTo('#your_div');
I have solved similar problem as following.
Download the webpage over ajax
Iterate it over and find any <script> and </script> tags
Get content from within these tags as text
Create new <script> element and insert there the code
Append the tag to your webpage
Another thing is you will need to somehow call the script..
I have done it this way:
I set standardized function names like initAddedScript callback which I am calling after appending the script to the page. Same as I have deinitScript called when I do not need the code (and its variables,..) anymore.
I must say this is awful solution, which likely means you have bad application architecture so as I have had:)
With css is it the same, but you do not need any handlers. Just append the style tag to your documents head.
If the page you load doesn't have any style data, then the external stylesheets must have relative paths that are not correct relative to the invoking document. Remember, this isn't an iFrame - you aren't framing an external document in your document, you're combining one document into another.
Another problem is that loading your complete page will also load the doctype, html, head, and body tags - which modern browsers will cope with most of the time, but the results are undefined because it's not valid HTML to jam one document into another wholesale. And this brings me to the third reason why it won't work: CSS links outside of the head section aren't valid, and the misplaced head section caused by your haphazard document-in-document collage.
What I'd do for compliance (and correct rendering) is this, which would be implemented in the Success callback:
Copy all link elements to a new jQuery element.
Copy the contents of all script in the head section
Copy the .html() contents from the loaded document's body tag
Append the link elements (copied out in step 1) to your host document's head
Create a new script tag with your copied script contents and stick it in the head too
Done!
Complicated? Kind of, I guess, but if you really want to load an entire page using AJAX it's your only option. It's also going to cause problems with the page's JavaScript no matter what you do, particularly code that's supposed to run during the initial load. There's nothing you can do about this. If it's a problem, you need to either rewrite the source page to be more load-friendly or you could figure out how to make an iFrame suit your needs.
It's also worth considering whether it'd work to just load your external CSS in the host document in the first place.
I suppose you are looking for something like this:
your page div --> load --> www.some-site.com
After a quik search the closest solution seems to be the one by "And": Load website into DIV
You have to run a web server and create a proxy.php page with this content:
Then your JQuery load() function should be like this:
$("#your_div_id").load("proxy.php?url=http://some-site.com");
NB. I have tested this solution and it should not load all the CSS from the target page, probably you'll have to recreate them. For example the image files stored on the remote server will not loaded, I suppose due to authentication policy.
You will be also able to view only the target page without the possibility to browse the target site.
Anyway I hope this could be a step forward to your solution.
Get your entire webpage as text using ajax
document.open();
document.write(this.responseText);
document.close();
OR
document.documentElement.outerHTML = this.responseText;
But you need to change the path of css and js pages in original webpage if the resulting webpage is in another directory.
I think this option is not avaiable, but maybe you know some strategies for doing it!
I'm on http://www.mydomain.com, and I put an iframe with jquery of another domain :
<div id="myContent"></div>
$('#myContent').html('<iframe id="myFrame" src="www.anotherdomain.com"></iframe>');
Well, the page that I load, www.anotherdomain.com, it's mine, so I can add any kind of code!
What I'd like to do is set the height of myFrame regard the real size of the loaded page (which I can't know, it can changes during the time).
Is there a method where I can comunicate to the parent DOM (mydomain.com) the size of the inserted page (anotherdomain.com)?
I don't know it, I dubt so, but why don't ask.
You can send messages (such as the height of the frame) between iframes on different domains using postMessage: https://developer.mozilla.org/en/DOM/window.postMessage
The only solution I found for that was to pass iframe height via url. You can find my test here :
http://jsfiddle.net/Grsmto/nBWrJ/2/ (updated)
This solution works cross browsers (chrome, ff, ie all versions, mobile etc.) and cross domain.
You MUST have access to the iframe code itself AND the iframe host.
You can refresh the iframe height when you want (even if content change) just by calling the publishHeight() function inside your iframe.
This should work without jquery (mostly writen in pure javascript...).
The only inconvenient is that you will have the height in the url like :
http://www.yourdomain.com/index.html#1458px
But you should easily remove it or change it to something less ugly.
EDIT : It seems that Disqus and Twitter use this library to do that : http://easyxdm.net/wp/
EDIT 2 : On your page you put the code on the first jsfiddle page. In your iframe you put the code of the iframe (the red div "myiframe" in bottom right). Hope it's clear...
But check my link below it should be a better and easier solution.
Cross-domain communications are very limited, and impossible depending on the on the remote host. http://www.ibm.com/developerworks/library/wa-aj-jsonp1/ You can use JSONP to try and retrieve information from the remote site, but its very trying and not for beginners.
The work around that I found that worked for me was I used a server side language instead to include the remote file. so instead of < iframe >
I did a PHP server-side include like:
<?php include 'http://www.example.com/file.txt?foo=1&bar=2'; ?>
This of course only applies if you are using PHP. Once I included it that way I was able to manipulate the DOM elements.
I've read through tons of posts and articles and haven't found a fix that works specifically for my problem
My parent page points via iframe to a local child page.
The child page is a php survey which changes height from page to page as the user clicks the next button. (Not really changing pages but re-populating content within one .php file)
I'm trying to have the parent page auto expand and contact height according to the length of the child page.
I have this specific need because I'm working within WordPress and want a PHP application (survey) to be wrapped within the design of the WordPress theme.
Ay help would be really appreciated!
Are the two pages on the same domain? If yes, then the easiest way to achieve this is with JavaScript running on both the parent and the child page.
Here's a rough idea of how it might work. On the child page:
...
<script>
function resizeFrame() {
// Call out to the parent iframe.
window.parent.resizeChild(document.body.clientHeight);
}
</script>
...
<body onload="resizeFrame()">
...
On the parent page:
<script>
function resizeChild(height) {
// Add the ID of the iframe element below.
document.getElementById(...).style.height = height + 'px';
}
</script>
You'll probably need to adjust the height, depending on the margins/borders/etc of the iframe element.
If the two pages are on different domains, this will be much harder. Cross-domain communication between iframes is difficult, particularly if you want to support older browsers.
Hopefully someone here can help me with this challenge!
I have a parent page which is the checkout page for an e-commerce site. It's run on zencart and for every order placed a table row is generated through ZenCart. I've setup an EACH function which generates an iframe for an artwork uploader for each TR (order) found. The uploader works and the correct number of instances are being generated.
I wanted to avoid an iFrame, but the uploader script I purchased will not permit me to load it directly into the zencart page template, or via AJAX (tried both). There's some kind of major resource/path situation going on when doing it this way... so I've resorted to iframes.
I'm able to call JS on file-upload-complete. At that point I'm trying to capture the name of the filename that was just uploaded and place it inside the TR. The problem I'm running into are permission error when trying to access the iframe contents.
I've tried everything I've come across on this site and many others, so believe it isn't a problem with the selectors/frame selection... Firebug is telling me that I'm getting permission errors when trying to access the iframe, yet they're both on the same domain and the src is being set by a relative path....
I'm completely lost, any suggestions would be appreciated! Thanks!
www.prothings.com/store
Add items to the cart and go to checkout.....
when you want to access main window or window.document from inside an iframe you should change the context by using window.parent
For example when you want to append some text to a div, you should do something like this
window.parent.$.('#theDiv').text('the text');
There is a bug in IE when you run the code from inside the iframe and remove the iframe in between. IE can't run the code in the fly
I can see that this question has been asked several times, but none of the proposed solutions seem to work for the site I am building, so I am reopening the thread. I am attempting to size an iframe based on the height of it's content. Both the page that contains the iframe and it's source page exist on the same domain.
I have tried the proposed solutions in each of the following threads:
Resize iframe height according to content height in it
Resizing an iframe based on content
I believe that the solutions above are not working because of when the reference to body.clientHeight is made, the browser has not actually determined the height of the document.
Here is the code I am using:
var ifmBlue = document.getElementById("ifmBlue");
ifmBlue.onload = resizeIframe;
function resizeIframe()
{
var ifmBlue = document.getElementById("ifmBluePill");
var ifmDiv = ifmBlue.contentDocument.getElementById("main");
var height = ifmDiv.clientHeight;
ifmBlue.style.height = (ifmBlue.contentDocument.body.scrollHeight || ifmBlue.contentDocument.body.offsetHeight || ifmBlue.contentDocument.body.parentNode.clientHeight || height || 500) + 5 + 'px';
}
If I debug the script using fire debug, the client height of the iframe.contentDocument's main div is 0. Additionally, body.offsetHieght, & body.scrollHeight are 0. However, after the script is finished running, if I inspect the DOM of the HTML iframe element (using fire debug) I can see that the body's clientHeight is 456 and the inner div's clientHeight is 742. This leads me to believe that these values are not yet set when iframe.onload is fired. So, per one of the threads above, I moved the code into the body.onload event handler of the iframe's source page. This solution also did not work.
Any help you can provide is much appreciated.
Thanks,
CJ
DynamicDrive has such a script, which I think does what you're asking for.
There's also a newer version now.
2011 update:
I would strongly recommend using AJAX over something like this, especially considering that a dynamically resizing iframe only works across the same domain.
Even so, it's a bit iffy, so if you absolutely must use AJAX over standard page loading, you really, really should use things like history.pushState (and have standard page loading as a fallback for browsers that don't support it). There's a jQuery plugin which handles this stuff for you, written by a GitHubber, called pjax, which they use only for repo navigation.
you moved the handler? maybe you should move the function to the inner frame as well, so that when you grab height values you reference the body directly rather than frame object... then call a parent.set height function
another trick, call function after settimeout of 10 msecs
i remember I had that problem once but I used IE's getBoundingClientRect() to get height of content, check mozilla developer center for something similar, this is just a hint, i did not research it
on another note, what is ifmBluePill? is it the iframe? or a div inside of it? why do you reference "contentDocument" of a div?
By the way, DynamicDrive improved their script to always resize even if the iframe contents change: http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm
From their page:
This is version II of the original
Iframe SSI script, which like the
original script lets you seamlessly
display external content on your page
via an IFRAME. It does this by
dynamically resizing the IFRAME to be
the height of the page contained
within it, eliminating any possible
IFRAME scrollbars from appearing while
snugly showing the entire external
content. Think of it as SSI (server
side includes) emulated using DHTML!
This script works in both IE5+ and
NS6+, and for other browsers, supports
the option to either completely hide
the iframe in question or display it
using its default height.
Now, this script differs from the
original in that you can load
additional documents* into the IFRAME
even after the page has loaded, and
the IFRAME will dynamically adjust its
height to fit the new document. So use
this script if you need to not only
display external content via the
IFRAME tag, but intend to change this
content after the page has loaded.