I am allowing a part of my site to be shown in another site (different domain).
My concern is to set the height of iframe to the height of its content. I could use this solution, but my case is cross browser case, so this doesnot work.
I tried to get the height of iframe by:
window.parent.document.getElementById('id_iframe').contentDocument.body.scrollHeight;
but this is giving only the visible height.
What am I missing?
You can't use JavaScript to access content the user has loaded from another domain. It would be a security risk.
With the cooperation of the other site, you can receive a message (via postMessage) sent by the other site when its load event fires that tells you its height (and then you can resize in response to that).
It could also sent new heights when resize events fire in it.
Related
Is there a way to set an iFrame element to the size of elements inside it, discluding margins?
For example, if I set an iFrame of https://example.com, it will show
<iframe src="https://example.com"></iframe>
and I can change the height and width with CSS or JS but can I automatically set the width and height of an iFrame so that there is no scroll?
I tried doing something like
onload='this.style.height=this.contentWindow.document.body.scrollHeight+"px";this.style.width=this.contentWindow.document.body.scrollWidth+"px";'
but it did not work.
Any help would be deeply appreciated.
I think it's not possible when the iframe is from a different domain.
To set the iframe size according to its content, you need to access this content and "measure" it, using Javascript.
In most of the cases, you'll encounter a cross origin request security error that will prevent you from accessing the content.
But maybe you want to achieve this with an iframe from the same domain and provided "example.com" as an... example ?
My object is to remove the scrollbars of an iframe for cross domain servers, which I don't have access to.
Page A has an iframe which displays contents of an external server
The content is not fixed, its height changes with time so I can not fix the height, it has to be dynamic.
It has to be handled with JavaScript. I have a list of objects corresponding to the users selection. When a different selection is made, different content types are shown.
I have tried to a solution with postMessage, but it does not solve the problem as I don't have access to the server. I was thinking more of a view, which resizes the iframe when the page is loaded.
You can't. There is no way to determine the size of a page in a cross-domain iframe without explicit support from scripts running on that page. Since you've already said that you can't modify that page, there's no way to do this.
There are many questions answered regarding resizing iframe height according to it's content, but what if the content gets too lengthy and exceeds the height of the container. In this case I want the container height to resize accordingly and without iframe getting scrolls or trimmed in case of setting overflow to hidden. How can I do this?
Since your document and iframe are different domains, the javascript from one cannot directly access the DOM of the other (see same-origin security restrictions). That means that you cannot directly reach into the DOM of the iframe to find out how large it would like to be such that you can set the iframe size to that size from within the containing document.
Any options you have for doing this require some code control within the iframe. For example, you could support window.postMessage() between the two iframes and the containing document could ask the iframe how large it would like to be via window.postMessage() and when it receives the response, it could then change the iframe size.
Various references:
cross-domain iframe resizer?
http://css-tricks.com/cross-domain-iframe-resizing/
Cross-domain, cross-browser Iframe communcation, made easy!
Yet Another cross-domain iframe resize Q&A
https://github.com/davidjbradshaw/iframe-resizer
I have an iframe loaded in a parent window of a different domain, and I want to find the pixel height difference between any point in the iframe and the iframe's document height. By iframe document height, I don't mean just the top of the iframe, but the top of the document that is loaded inside of the iframe (which are different if you scroll down inside the iframe).
I want to be able to do this from within a script in the parent window's html. Using $("iframe").offset().top to find the top of the iframe's document doesn't work for reasons stated above (I don't want the top of the iframe). Is there a way to get the reference of the document DOM element that is loaded inside of the iframe, and would that help me?
If the iframe is on a different domain, you can't do it. It would require access to the contentDocument to get the scrollTop position. While obviously knowing where the document is scrolled isn't a compromise to a user's security, accessing contentDocument on another domain is a blanket no-no.
Now, if you had a PHP file on your domain, that proxied the page from the other domain, that's another story. Such a method would be simple to implement if you're only accessing one page with no links or forms:
<?php echo file_get_contents("http://example.com/"); ?>
and...
<iframe src="myproxy.php" id="iframe" />
Now you can access the contentDocument, and therefore its contents:
document.getElementById('iframe').contentDocument.documentElement.scrollTop
// contentDocument.body.scrollTop in some browsers - get both and add them together
If there are links and/or forms, your life will be a lot more difficult. First you'd have to rewrite all URLs to go through your proxy script, then you'd have to use socket functions or cURL to POST form data to the other server... it'd just be a lot easier if you have only one page.
I'm currently developing a clicktail clone. I've recorded all the mouse interactions and window scrolls and my plan is to play them back by opening the URL that has been recorded into an iframe and then have a mouse image move to the captured coordinates, images indicating when a click occurred and the iframe scrolling to the captured scroll positions
this was working nicely while I was viewing a page from my domain in the iframe, but as soon as I display a page from a different domain, I get access denied errors from the FF console and the same issues from IE
this is due to the Same origin policy for JavaScript.
I have been reading this article -> Ways to circumvent the same-origin policy
it seems that this is becoming an issue for many developers and there are hacks to get round it.
can anyone suggest a suitable hack for my situation ?
You could always fake it. Maybe you could have your place your iframe in a container div (css: overflow: hidden; height: /* some height */), with the iframe element set to the full height of the page, and scroll the div?
You could use a PHP proxy on your domain that (a) reads the target URL to a string, (b) adds a base tag so that images, links, etc. work correctly and then (c) prints the string.
The end result is a page that is identical to the page from the external domain but is hosted on your domain. This means that you can execute JavaScript in the child frame from the parent frame.
The code for the proxy is as follows:
<?php
ini_set("user_agent", $_SERVER['HTTP_USER_AGENT']); // temporarily override CURLs user agent with the user's own
$page = file_get_contents($_REQUEST["www"]);
$page = preg_replace("/<[\s]*head[^>]*>/i", "<head><base href='".$_REQUEST["www"]."' /><base target='_blank' />", $page);
echo $page;
?>
One consideration when using this method is that when the user (or JavaScript) clicks a link in the proxied page, the user will be taken to a page on the original domain (or elsewhere). This means that your JavaScript will no longer be able to access or execute scripts in the iframe.
To make this consequence more transparent, links are set to target='_blank' in the code above.