My page is loaded into iframe, and I need to adapt the size of that iframe using javascript. I try the following:
iframe.style.overflow = 'hidden'
iframe.scrolling = 'no'
var content = iframe.contentWindow.document.getElementById('content')
var height = content.offsetHeight + 10
iframe.style.height = height + 'px'
console.log(content.offsetWidth)
var width = content.offsetWidth + 10
iframe.style.width = width + 'px'
On FireFox it works as supposed to, but IE9 ignores both scrolling and overflow attributes. The browser mode is set to IE9-Standards.
How to get rid of that scroll in iframe under IE9?
Looks like the iframe is loaded, when you're doing this. You can set:
iframe.contentWindow.document.body.style.overflow = 'hidden';
If there's a literal iframe tag on the page, you can set scrolling attribute to "no", but when setting this attribute value with JS after iframe element has been created to a page, doesn't work. If you're creating the iframe dynamically, you can set setAttribute('scrolling', 'no') before appending it into a document.
Related
I have a bootstrap modal popup that works great if the webpage is not in an iframe, like so:
https://jgroups-dev.herokuapp.com/ (click Find a Group, then click a Email button)
However, when it is within an iframe the modal popup anchors to the top of the iframe, completely ignoring the user's scroll position:
http://www.yourjourney.tv/connect/j-group-catalogue/
To try to hack around this issue, I'm attempting to manually set the modal popup's top property based on the scroll position within the iframe, however $(window).scrollTop() and other variants are all returning either 0 or 40 from within the iframe.
$('.send-email-modal').modal();
setTimeout(function () {
if(inIframe()) {
var emailModal = $('.send-email-modal .modal-dialog');
var win = $(window);
var offset1 = win.scrollTop();
var offset2 = document.documentElement.scrollTop || document.body.scrollTop;
console.log('offset1: ' + offset1);
console.log('offset2: ' + offset2);
var positionWindow = (offset1 + (win.height() / 2)) - (emailModal.height() / 2);
console.log('win.height(): ' + win.height());
console.log('emailModal.height(): ' + emailModal.height());
console.log('positionWindow: ' + positionWindow);
emailModal.css({ 'top': positionWindow });
}
}, 500);
Here is the console output:
offset1: 40
main.js:54 offset2: 40
main.js:56 win.height(): 27037
main.js:58 emailModal.height(): 426
main.js:59 positionWindow: 13345.5
If I can't retrieve how far down the user has scrolled in the iframe from code within the iframe, then I have no chance of being able to position the bootstrap modal popup correctly. Help very much appreciated, I've run into a brick wall on this one...
Possible issue: It is not ignoring the scroll value. The user scroll is taking place in the parent window. Your iframe's height is probably equal to it's document height. Modal is always place on the top center (with some margin) of the containing window(in this case your iframe). and hence it works fine when you see it in stand alone window. And it's near the starting of the document inside the iframe.
Possible Solution [in case of same origin]
From inside your iframe, check if the page has a parent window (to ensure it is inside a iframe) and if it has read the value of the scrollTop and then manually adjust the modal css top property.
parent == self // for any top level window
Following will give you the scroll top of the parent window
parent.document.body.scrollTop
In case of cross origin
In case of different origins of iframe and the parent, you will not be able to access the parent's properties.
Try using the postMessage. send the value of scrollTop from parent to the iframe wherever user scrolls. Save this value and use it whenever you show the modal.
Read more about postMessage here https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
I have been searching around for a solution to set scroll of iframe sourcing same domain page using javascript. I just want to have scroll on the iframe only if the content's height is greater that the window height. Came across solutions using setInterval. In IE i dont get a proper scrollheight for a page that has some content hidden. The works fine in chrome and mozila although. Also it looks like i have to set anyways max-hright of the iframe to get this code working on chrome and IE when the use click on +/- in the iframe page. I dont have controll over the source page for iframe. Also there are events where in the content height of the iframe changes at client side like expand/collapse thing. Any suggestions as to why it is happening or any other options to implement.
Iframe container (div)
border: groove;border-width: thin;display:none;position:fixed;z-index:998;width:800px;background-color: white;right: 83px;top:22px;
Iframe style
top: 20px;margin:0;padding:0
Javascript function that gets called based on interval to set iframe height to that content height
function AdjustIframeHeightOnLoad() {
var screenHeight = $(window).height();
var iframeContentHeight;
var iframeContentwidth;
iframeContentHeight = document.getElementById("iframe_ObjectLink").contentWindow.document.body.scrollHeight;
iframeContentwidth = document.getElementById("iframe_ObjectLink").contentWindow.document.body.scrollWidth;
if (iframeContentHeight > (screenHeight - 47)) {
document.getElementById("objectionMenuContentContainer_div").style.height = (screenHeight - 27) + "px";
document.getElementById("iframe_ObjectLink").height = (screenHeight - 47);
document.getElementById("iframe_ObjectLink").contentWindow.document.documentElement.style.overflowY = "scroll";
}
else {
document.getElementById("objectionMenuContentContainer_div").style.height = iframeContentHeight + "px";
document.getElementById("iframe_ObjectLink").height = (iframeContentHeight - 25);
document.getElementById("iframe_ObjectLink").contentWindow.document.documentElement.style.overflowY = "hidden";
}
if (iframeContentwidth > 883)
document.getElementById("iframe_ObjectLink").contentWindow.document.documentElement.style.overflowX = "scroll";
else
document.getElementById("iframe_ObjectLink").contentWindow.document.documentElement.style.overflowX = "hidden";
}
i create a frame like 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];
but I would want the frame to have the same height the source has, so all is visible, instead of setting a static height and getting scrollbars.
maybe I did it wrong, but overflow = visible didn't seem to work.
my Iframe (that is on other domain) use Ajax inside and data height change when you select dropdown values.
Visit for my Iframe demo [here](http://jsfiddle.net/pq7twrh2/5/)
in my Iframe when i select all dropdown then show data and then height increase.
i want when content or height increase my frame height auto increase.
how this possible?
try adding this to your iframe source:
$(document).ready(function(){
$('#engineType').change(function(){
$('#iframe1', window.parent.document).height($('#VehicleDetails').height() + 227);
});
});
Make sure that you follow the Same-Origin Policy
One of the few ways would be to get the iframe content (which is your site's content) and get the height of the body and set the iframe's height. Except if you get this error: The frame requesting access has a protocol of "file", the frame being accessed has a protocol of "http". Protocols must match, you are getting a cross-domain problem, and you won't be able to fix that. It is impossible for your site to access the loaded iframe's site at all.
But if you manage to do that, it would be like this:
jQuery(function($){
var lastHeight = 0, curHeight = 0, $frame = $('iframe');
setInterval(function(){
console.log($frame.get());
curHeight = $frame.contents().find('body').height();
if ( curHeight != lastHeight ) {
$frame.css('height', (lastHeight = curHeight) + 'px' );
}
},500);
});
This will check the height of the body of your iframe's site every half a second and set the iframe's height if it has been changed: http://jsfiddle.net/pq7twrh2/7/
I'm having trouble resizing an iframe after injecting it on load using javascript. I use a set width of around 300px which works fine but dynamically size the iframe's height to the size of it's content (a blog post).
I've tried getting contentWindow (had no child dom elements) and contentDocument (which was undefined) to no avail.
I do this on load:
var iframe = document.createElement('iframe');
iframe.setAttribute('id','postFrame');
iframe.setAttribute('frameborder','no');
iframe.setAttribute('scrolling','no');
iframe.setAttribute('onload','resizeFrame();');
iframe.setAttribute('width','300px');
iframe.setAttribute('src','http://espn.go.com/espn/print?id=7454651');
var container = document.getElementById('container');
container.appendChild(iframe);
function resizeFrame(){ /* resize iframe based on content height*/ }
Is there a way to re size iframe height based on content within the iframe?
*EDIT**
Possible workaround:
Is there any hope that i could use Access-Control-Allow-Origin to assist the problem? Lets say the page that goes in the iframe is my own or is echo'd from a php script
I use the following function to resize an iframe to be the height of the content. It's for an intranet app (and only properly tested in IE8) but certainly works so it might provide the missing clue-
function sizeIframeToContent(id) {
// resize iframe to be the height of the content
try {
var frame = document.getElementById(id);
innerDoc = (frame.contentDocument) ?
frame.contentDocument : frame.contentWindow.document;
var objToResize = (frame.style) ? frame.style : frame;
objToResize.height = innerDoc.body.scrollHeight + 10 + 'px';
//objToResize.width = innerDoc.body.scrollWidth + 10 + 'px';
}
catch (err) {
console.log(err.message);
}
}
Edit an explanation- once the document has loaded you should be able to find the document height which you can then use as the height for the iframe. I commented the width part of the above function as you're specifically asking about the height.