We Keep Coding

Set iFrame size to elements inside

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 ?

Change element style on a image inside a iframe

Is there a way to change the element-style of the img inside the iframe using jquery. The iframe epubjs-iframe change the id on every page load. What I want is to change the style = heigh="98%" to max-height:467 and width:auto on every page load.
Html-code

Yes, IF the src of your iframe is pointing to SAME domain.
Eg.
var iframe = $("#iframe"); // Selector to get the iframe
$("#elemInIframe", iframe.contents()).css("color", "blue"); //Or whatever method you want
And Of course, if the src of iframe is in different domain, due to security reasons, You will not be able to access the contents in javascript. Sorry about the same!!

Not know if it is the case here, but when working with iframes You may need to overcome Same Origin Policy: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
You can use PostMessage for cross-frame communication. To do so:
You need to be in control of the code both host page and embedded one
Or use the PostMessage API provided by page You want to embed
More about PostMessage: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

resize iframe height on different domain

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.

iFrame text alignment

Im using an iFrame for a WYSIWYG, and would like to add a button that will align all the content within the iFrame to the center.
I tried adding "text-align:center;" on the class of the iFrame but that did nothing.
How can I do this?

I may be incorrect, but my understanding is that you can't modify the contents of an iFrame, unless you have access to the site where the iFrame's content is coming from.
See this for more details.
To add, using "text-align" will only align the iFrame itself as a whole, but not the content.

An iframe behaves as a separate independent web page, so you'll need to change the HTML inside the iframe. Due to the same origin policy, you can only do this if the iframe content comes from the same domain name as the parent page.
If the domain names do match, you can do something like this in Javascript:
function center_iframe() {
var iframe = document.getElementById('myiframe'),
iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
iframeDocument.body.style.textAlign = 'center';
}
This might be too simplistic for your needs (and whether it works depends on the HTML inside the iframe), but here's an example anyway.

Resize iframe and its parent height according to content inside iframe

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