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 ?
Related
I want to set the width of image inside of iframe.
By default when an image is set inside iframe and if the image is in high resolution then the iframe will be scrollable
If both frames are on the same domain and there is no restriction with Same Domain Policy, you can use the following code from the "parent" frame to change an image in the "child" iframe.
Pseudo code, you need to actually edit it to match your DOM:
document.getElementById('iframe').contentDocument.getElementById('yourImageId').width = '100';
Notes: In case iframe is on a different domain, you have limited access for security reasons.
More details here https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
i just wanted an iframe to always have the height of its content. i thought it would be as easy as "overflow:visible" but of course not. then i found codes to actually make this work. but of course they dont work if the content is from another domain... same origin policy and what not.
i cant edit the content im embedding, or whatever its called. i just want the frame to be the same size. i thought this is a pretty basic expectation.
actually, youtube somehow does this with the comments section, but maybe they do cross domain communication or something.
this is really all i need. something similar to an iframe that can adjust its height to the content
code for the iframe:
and the code is this: var f = document.createElement('iframe');
f.src = 'https://apis.google.com/u/0/wm/4/_/widget/render/comments?usegapi=1&first_party_property=YOUTUBE&href=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D' + location.href.match(/v=(.+?)([#&]|$)/)[1];
var e = document.querySelector('#distiller-spinner');
e.parentNode.appendChild(f, e);
e.parentNode.removeChild(e);
it makes the actual comments section on every youtube watch page load instantly, except, the frame's height is never right, so i removed the f.height part from the code
Have you tried using an iframe and setting the height attribute to 100%. This can be done directly in the iframe element. Make sure the html and body elements are also set to 100% for this to work properly.
<iframe style="height:100%;">
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.
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.