I know this get's asked a lot, but how do I set the dynamic height of a cross domain iframe, when I don't have access to the actual page the IFRAME is showing?
You can't. There is no way to know what the height of the document in the frame is from outside the frame because all information about the document is protected from third party sites.
If you have access to add javascript on both parent and iframe page you can add this to both:
document.domain = 'mydomain.com';
This way you avoid the cross-domain restrictions, and can sniff the hight to change iframe height in parent page
have to proxy the page though your own server (at least one time)
<?php
$homepage = file_get_contents('http://www.megaupload.com');
echo $homepage;
?>
<script>etc</script>
I was having this issue too but I finally got a solution:
Put this code inside the <head>:
<script type="text/javascript">
function resizeCrossDomainIframe(id, other_domain) {
var iframe = document.getElementById(id);
window.addEventListener('message', function(event) {
if (event.origin !== other_domain) return; // only accept messages from the specified domain
if (isNaN(event.data)) return; // only accept something which can be parsed as a number
var height = parseInt(event.data) + 0; // add some extra height to avoid scrollbar
iframe.height = height + "px";
}, false);
};
</script>
Then, use this code for the iframe:
<iframe src='http://www.example.com/my-iframe/' frameborder="0" id="my_iframe" onload="resizeCrossDomainIframe('my_iframe', 'http://www.example.com');">
Related
I would like to hide an html Element (in my case a headline) only when the dynamic content of the site expands so far vertically that a scrollbar would appear. I am aware how to hide an element but I don't know how to trigger the event. I am searching for something like the #media rule in css, only that it shouldn't be triggered on the viewport resolution, but the size of the content (vertically).
Does anyone know a solution to this?
Thanks in advance!
Thanks to Nicks comment I figured out a solution.
If anyone is looking for the same thing, here is a working Javascript solution (no JQuery needed):
var callback = function(){
// Handler when the DOM is fully loaded
// Check if the body height is bigger than the clients viewport
if (document.body.scrollHeight > document.body.clientHeight) {
// Assign a class with display:none (in my case 'hide')
document.getElementById("headline").className = 'hide';
}
};
// This part ensures that the script will be loaded once the site is loaded
if (
document.readyState === "complete" ||
(document.readyState !== "loading" && !document.documentElement.doScroll)
) {
callback();
} else {
document.addEventListener("DOMContentLoaded", callback);
}
With help by https://www.sitepoint.com/jquery-document-ready-plain-javascript/
I have an iFrame in my jsp page where in page load it should have height and width as 600 and 400 respectively. This iFrame contains some page having some forms in it, once the form is filled and submitted, it will redirected to a thank you page. At that time I need the height of the iFrame as 200(because the page contents are less and I need to reduce the white space in it). how to achieve this? I get n number of links in stack exchange itself but nothing is useful in this case.
Is there any way to check if the iFrame src url is changed? If so I can make a condition and do the below code to reduce the height.
<script type="text/javascript">
function iframeLoaded() {
var iFrameID = document.getElementById('idIframe');
if(iFrameID) {
iFrameID.height = "200";
iFrameID.width = "400";
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
iFrameID.width = iFrameID.contentWindow.document.body.scrollHeight + "px";
}
}
</script>
The above function is working fine if i give it in iFrame page load but I need to set this only when I get the thank you page inside iFrame.
Request to kindly help on this.
you can use something like cookie.js (https://github.com/js-cookie/js-cookie) for creating a helper cookie for each step in your iframe.
(function($) {
$( '#submit-button').on( "click", function() {
Cookies.set('isSubmitted', true);
});
})(jQuery);
Now you can check if the cookie is set and resize the iframe
(function($) {
if(Cookies.get('isSubmitted') === true) {
$('#iFrameID').height(200);
}
})(jQuery);
After this you can delete this cookie
Cookies.remove('isSubmitted');
You can do iFrame url change check in the parent page like this:
function check(){
$('#idIframe').load(function() {
console.log("the iframe has changed");
});
};
$("#idIframe").on("mouseenter",function(){
window.setInterval(check, 100); // 100 ms
});
I've created a page with an empty iframe on it. I can then select the iframe document and navigate to it's body:
var iframe = document.getElementsByTagName('iframe')[0];
var doc = iframe.contentDocument || iframe.contentWindow.document;
var body = doc.body;
console.log("Body is", body);
In firefox and chrome this gives me the body object. In IE10 it gives me null.
Here is a Jsbin demonstrating the issue. Open up the JS, Console, Output panels and click "Run With JS".
Two questions:
How do I get access to the iframe's body in a cross-browser manner?
Which is the correct "to-spec" behavior?
I had a similar problem earlier today. It seems IE, at least 9 and 10, doesn't create the iframe body correctly (when I used the developer tools I was able to see a body tag inside the iframe, but like you wasn't able to call it), when there's no specified src. It gives you null cause it doesn't exist.
The answer, to whether there is a cross browser manner to access the iframe's body, is no. BUT, you could use a workaround. First, check if the iframe body exist, if not, then create it.
Your code would look like this:
var iframe = document.getElementsByTagName('iframe')[0];
var doc = iframe.contentDocument || iframe.contentWindow.document;
// The workaround
if (doc.body == null) { // null in IE
doc.write("<body></body>");
}
var body = doc.body;
console.log("Body is", body);
Source: http://forums.asp.net/t/1686774.aspx/1
This code is working for me cross-browser:
var doc=ifr.contentWindow||ifr.contentDocument;
if (doc.document) doc=doc.document;
var body=doc.getElementByTagName("body")[0];
Over a year later but I believe the solution was to call
doc.open()
//make any modifications
doc.close()
//at this point doc.body will not be null
This made things work in a fairly consistent manner cross browser
How can I accomplish this?
I have an iframe inside a column (html table), but I want to make the td as high as the doc inside the iframe.
Is it possible?
Here is the answer ( in JQuery).
in jQuery :
$("#myIframe").on("load", function ()
{
$(this).parent("td:first").css('width', $(this).css('width')).css('height', $(this).css('height'))
});
You need to calculate the height of the content using Javascript.
You can see a working example here:
http://th.atguy.com/mycode/iframe_size/
I'm using this piece of code in 2 projects, it works ok for me. I don't know if there is a better way to achieve this (note that this code has a setInterval, it will check the iframe's content height each 1 second and update its heights). It uses jQuery too.
let iframe = document.getElementById('your_iframe_id'),
current_height = 0,
iframe_content = $(iframe).contents().find('body');
setInterval(() => {
let new_height = iframe.contents().find('body').height();
current_height = new_frame_height(current_height, new_height);
iframe.css({ height: current_height });
}, 1000)
function new_frame_height(last_height, height) {
if(height != last_height + 60) {
last_height = height;
}
return last_height + 60
}
By the way I think this only works if the iframe is under the same domain from the parent.
If they are not, the cross origin block from the browser will not allow the parent to read the children's content.
I have a full flash site which uses swfobject to embed it 100% height and width. I'm using swffit to force a browser scroll bar for pages with a large amount of content. This is all fine and works perfectly. I also have the content in HTML format, as alternative content and this also works apart from in order to get the flash swfobject to work I need to add the overflow = hidden in the CSS, like:
html{
height: 100%;
overflow:hidden;
}
#content{
height: 100%;
}
This then stops the scroll bar showing when the alternative content is shown.
Does anyone know how to fix this?
I don't know SWFFit but why do you need the overflow: hidden in the first place? Won't it work without?
The only workaround that comes to mind is to define two classes, one with, one without overflow: hidden, and change the class of the html element programmatically from within Flash by triggering some Javascript.
If you need to change a page's CSS or content based on the success of a SWFObject embed, use the callback function feature in SWFObject 2.2.
For dynamic publishing, it looks like this:
var flashvars = {};
var params = {};
var attributes = {};
var embedHandler = function (e){
};
swfobject.embedSWF("mymovie.swf", "targetID", "550", "400", "9.0.0", "expressInstall.swf", flashvars, params, attributes, embedHandler);
In your situation, if you needed to remove overflow:hidden from the HTML element, you could do this:
var flashvars = {};
var params = {};
var attributes = {};
var embedHandler = function (e){
//If embed fails
if(!e.success){
document.getElementsByTagName("html")[0].style.overflow = "auto";
}
};
swfobject.embedSWF("mymovie.swf", "targetID", "550", "400", "9.0.0", "expressInstall.swf", flashvars, params, attributes, embedHandler);
This callback function feature is only available in SWFObject 2.2.