Here is the problem! I have an iframe that loads an external website. I want the iframe to resize to 100% based on the content height, so that I don't get a scrollbar. Setting iframe height to 100% does not work.
I came up with two solutions:
Set the document.domain property at both ends to the same domain,
which gives the iframe content access to the parent window. The the
resize method can be initiated from within the iframe.
Use HTML5 postMessage API to take appropriate action. I use to communicate between the two iframes.
Both these approaches are complex. Is there a simpler approach to this problem?
You could embed another iframe into your iframe. If the source of that iframe is from the same domain,protocol and port as the top level iframe then it can access it through parent.parent
I encountered the same problem last year and found a solution that worked for me on this blog:
http://solidgone.org/Set-IFRAME-height-based-on-size-of-remotely-loaded-content
An updated version of that method can be found in his follow-up article: http://solidgone.org/Redux-Set-IFRAME-height-based-on-size-of-remotely-loaded-content
Like jack describes, the implementation requires an embedded iframe into your page with a source of the same parent domain.
I did have a small issue in FF. The solution can be found in the comments of the follow-up article.
Hope this helps!
A simpler solution would be to use this little project on github.
https://github.com/davidjbradshaw/iframe-resizer
Related
I have a rather tricky problem. I work with a client who are restricted to only use HTML, CSS and JavaScript. We have build a form using PHP and Javascript - and currently we only find it possible to embed the form using an iFrame. We have no FTP-access, so the iFrame is loaded from a different domain.
While the form use JavaScript to load new questions and results, this makes it difficult for the height to fit the screen. If the frame fits some of the screens, it will cut off some elements on other screens.
While I am unable to upload any files to the FTP that contains the iFrame, it is not possible to use the helper-file solution, as described here.
So, my question is: is it possible to add a JavaScript action that change the css of the iFrame height, when a specific div id is loaded / action executed?
Thanks in advance! :)
EDIT: I decided to solve this differently. But in case anyone else will stumble across this post, I think the solution offered here might work (if the code is updated to fit the latest jQuery). The main problem in my case seemed to be the limited access to the client domain.
You can't control the parent window document property if the iframe is from different domain. How ever you can try busting out of the iframe.
https://css-tricks.com/snippets/javascript/break-out-of-iframe/
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 am using Google Forms, get an and then I embed into my website code,
I want to custom the form's background, make it transparent.
I am using JQuery,It can read the object create by iframe from google, but if I want to change its class 'ss-form-container's css, it failed.
Can someone show me how to apply CSS to google docs's iframe?
Here is the Link to my test website: http://dive.maxinrui.com/ The questionary is on third slide.
Thanks in advanced!
You can't. Frames are not allowed to interact with each other unless they have the same origin. Since the origin of the Google Docs frame is docs.google.com while your page's main frame is on dive.maxinrui.com, you cannot "touch" the contents of the frame, so there is no way for you to apply your CSS to it.
You can apply some styling to a Google Docs form by applying a theme to it in Docs. If you need more control than that, though, you will need to find another solution.
This would be a workaround solution (if it works).
Would it be viable to copy the form source code from the Google Docs page in the iframe, embed it into your own page, then modify the CSS?
I have a page that people load in an iframe (its like a widget they can put on their pages) and I want to see which pages are loading it... is this possible?
No, that's not reliably possible due to the Same origin policy.
(You would have to read the value of parent.location.href, which is not possible.)
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.