I have an application in which I load an external website into an Iframe so people can QA it I need to find a way of getting the absolute size of the contents inside of the iframe so all the contents that are hidden because you havent scrolled down to that at the moment I can only seem to get the size of iframe just on the screen i.e. i have an iframe size of 800x600 and i can only get this value for some reason, but the website may be 800x1200 i need to be able to get that full size.
Currently i have this code
aWidth = document.getElementById('FrameStyle').scrollWidth - 17;
aHeight = document.getElementById('FrameStyle').scrollHeight + 500;
This is getting me the height but i have to manually add on pixels to the end which is not how i want and also the website may be longer than just 500 more pixels. So how can I go about getting the complete size of the iframes inner contents.
It looks like you can use Dot_NET Junior's suggestion if you run the code once the iframe contents have loaded, e.g.
var iframe = document.getElementById('iframeId');
iframe.onload = function () {
var width = iframe.contentDocument.body.scrollWidth;
var height = iframe.contentDocument.body.scrollHeight;
};
Related
Long story short. I need to create an iframe with javascript and align it in the center of the page.
I found this nice piece of code:
var iframe = document.createElement('iframe');
var html = '<body>Foo</body>';
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
document.body.appendChild(iframe);
console.log('iframe.contentWindow =', iframe.contentWindow);
Does anyone have an idea how to fix the alignment to be centered? The reason for choosing an iframe to begin with is because I want the frame to be independent of the current page's CSS styles.
/Patrik
1- Get browser window size
2- Get iframe width and height
3- Substract number 2 from number 1
4- Divide rounding the resultby 2
And that way you'll have the x and y coordinates for your iframe to locate it in the center of the browser window.
I am building a lightbox style div element for an ibooks epub. I want the div to be displayed on the current page being viewed at the time. If the image is on page two of the ebook, I want the lightbox to showup on page two. I have the div width and height set to fill the screen.
document.getElementById("LightBoxDiv").style.width=window.innerWidth+"px";
document.getElementById("LightBoxDiv").style.height=window.innerHeight+"px";
I can manualy set a fixed top value of the div if I know which page number an image is on. My device has a 460px height on the window. So for an image on page two, the top should then be 460 which is the beginning of the 2nd page.
document.getElementById("LightBoxDiv").style.top="460px";
However, as ebooks are dynamic in that the user can change the size of the text larger or smaller, the page upon which something might fall changes. I need a way to set the top dynamically based upon the current page. If I know the current page number being viewed, I can set the div top to
var lighboxHeight = (pagenumber-1)*window.innerHeight;
I tried using the window.pageYOffset to calculate the current page, but this always gives a 0 value as the page does not scroll in an ebook. Unfortunately, I can find no documentation or any reference describing how to use javascript to access the page numbers. Does anyone have any idea how to access or find the current page number in an ibooks epub using javascript?
Thanks,--christopher
I believe I found the solution. This question/answer helped a lot.
//window height
var winHeight = window.innerHeight;
//top of object to be placed in the lightbox
//can be any object
var curOjbTop = document.getElementById(svgId).getBoundingClientRect().top;
//body y value
var bodyTop = document.body.getBoundingClientRect().top;
//amount the object is shifted vertically downward from the top of the body element
var offset = curObjTop - bodyTop;
//page number of the object
//this is actually 1 less than the true page number
//it basically starts the page count at 0, but for actual page number add 1
var curPage = Math.floor(offset/winHeight);
//this sets the top edge of the lightbox at y=0 on the page the item is on
var lightboxTop = curPage*winHeight;
document.getElementById("LightBoxDiv").style.top=lightboxTop;
My lightbox div covers the entire viewing area, but if you wanted a smaller one that was centered, you would need to add an additional half of the window height and then set the top margin to be half the negative amount of the height you wanted.
For example if the light box was 200 x 200, then your lightboxtop would be
var lightboxTop = (curpage*winHeight)+(winHeight*.5);
var topMargin = "-100px";
It may need to be tweeked some, but overall it should work to determine a page number.
Can I use some sort of JS script to take advantage of the size control here in the url?
<iframe id="myIframe" src="https://media.embed.ly/1/frame?url=http%3A%2F%2Fwww.twitch.tv%2Fgamemode_mc_&width=1280&height=1280&secure=true&key=0202f0ddb5a3458aabf520e5ab790ab9&"
(My goal here is actually to place this Twitch feed as a background to my webpage - resizing the actual content of the iframe is actually a very unusual but additional treat here, because of the way Twitch's url works!)
To be clear, I'm very early in my learning of JS, and looking for a beginner solution to take the browser window size to dynamically control the parameters in this url to control the size of the content in this iframe.
width=1280&height=1280&
are the key lines here. I need to make these measurements follow the viewport size instead of being static. What method is best to do this?
You can certainly set the src to your iframe programmatically, and build the src url based on variables such as your viewport size.
You can try something like this:
function loadIframe() {
var url = '',
viewportWidth = document.documentElement.clientWidth,
viewportHeight = document.documentElement.clientHeight;
url = 'https://media.embed.ly/1/frame?url=http%3A%2F%2Fwww.twitch.tv%2Fgamemode_mc_&width=' + viewportWidth + '&height=' + viewportHeight + '&secure=true&key=0202f0ddb5a3458aabf520e5ab790ab9&';
document.getElementById('myIframe').src = url;
}
Then you can make the iframe reload when the window is resized and when the window is done loading:
window.onload = loadIframe;
window.onresize = loadIframe;
However I would actually recommend using jQuery to help you do this as you would be able bind to cross-browser events easier.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Resizing an iframe based on content
I'm trying to load one of my pages into an iframe. I'm never sure how big the page will be, the data on the page is loaded dynamically. I'd like the iframe to always fit the page, no matter how big or small it is. Here's what I have:
function loadModal() {
myframe = $('<iframe id="mymodal" src="MyPage.aspx" width="700"></iframe>');
myframe.appendTo($('html'));
var height = document.getElementById('modalPreview').contentWindow
.document.body.scrollHeight;
$("#mymodal").attr("height", height);
}
I've been trying to get the height of the page after it's loaded. The problem is that height comes back as 0. But if I do this:
setTimeout(function () {
$("#mymodal").attr("height", height);
}, 2000);
the correct height is loaded. I assume it's because the data needs a few seconds to load. But this looks funky if the page loads really fast, or it will still give me a height of 0 if it takes more than 2 seconds to load the page.
So is there a way to:
Wait and set the height of the iframe once the data loads, or
Set the height of the parent iframe from MyPage.aspx?
If you're going to use option #2 you can access the parent window using the DOM and set the iframe height from the child.
$(document).ready(function() {
var iframeWin = parent.document.getElementById("yourIframeID");
iframeWin.height = document.body.scrollHeight;
});
You can hook an onload event to the Iframe before you insert it. When it fires, inspect the height of the document in the iframe and adjust its height accordingly.
I have a page that loads another page(url) onto it. The problem is that the iframe page does not fit well in the outer page. How can I reduce the size of the iframe page having the content of the iframe page intact? I do not wish to have scroll bars.
Unfortunately you can't really scale an iframe so that its contents change their size. To the browser, the iframe is a window onto another rendering context which has its own layout according to its own CSS. You are at the mercy of how the content inside the iframe is laid out.
If the iframe URL is from a different site and you can't modify it, then you can't really do anything.
If you can modify the page that's displayed within the iframe, well I'd assume you wouldn't be asking.
See the answer here ( How can I scale the content of an iframe? ). I'm using it and it works on FF, Chrome a little flakey.
You could try expanding the width/height of the iframe and checking the clientWidth vs iframe width. If they're equal, there's no scrollbar, otherwise there is.
Use a midpoint approach for efficiency. In sudo-code:
dx = iframe.width;
while (dx > 1) {
previous = iframe.width
if( iframe.width - iframe.clientWidth > 0 ) {
iframe.width += dx*2;
} else {
iframe.width -= dx/2;
}
dx = Math.abs(previous-iframe.width)
}