How can I make my iframe fill the window and not display any scrollbars?
This works for IE6, I would like to get it to work for all browsers if possible:
<iframe name=iframe1 src="theSiteToShow.html" width="100%" height="100%" frameborder="0" marginheight="10" marginwidth="10"></iframe>
<script type="text/javascript">
function resizeIframe() {
var height = document.documentElement.clientHeight;
height -= document.getElementById('frame').offsetTop;
// not sure how to get this dynamically
height -= 20; /* whatever you set your body bottom margin/padding to be */
document.getElementById('frame').style.height = height +"px";
};
document.getElementById('frame').onload = resizeIframe;
window.onresize = resizeIframe;
</script>
You should be able to do this using CSS only, without any need for javascript. The following works for me in IE6+, Google Chrome and Safari:
<style type="text/css">
body {
margin: 0;
overflow: hidden;
}
#iframe1 {
position:absolute;
left: 0px;
width: 100%;
top: 0px;
height: 100%;
}
</style>
<iframe id="iframe1" name="iframe1" frameborder="0"
src="theSiteToShow.html"></iframe>
Your frame margins should be set in the body of theSiteToShow.html.
UPDATE
Following your comment, I used the following as a test page:
<html>
<head>
<style type="text/css">
body {
margin: 0;
overflow: hidden;
}
#iframe1 {
position:absolute;
left: 0px;
width: 100%;
top: 0px;
height: 100%;
}
</style>
</head>
<body>
<iframe id="iframe1" src="http://stackoverflow.com" frameborder="0"></iframe>
</body>
</html>
Tested in IE6+, Chrome, Safari and Firefox, it works just fine and fills the entire window.
I was having the same issues with the scroll bars as well as the No Context Menu showing up, even though all these elements had been disabled. After a few days of trying to solve them, I stumbled on this post, which helped a bit, but led me onto finding a post on flexible webplayers with three code examples. Here're the links:
http://virtualplayground.d2.pl/?p=367#comment-224
Download package
Use the index file if you want a blank sheet to work from, replace your existing code in your exported .html file (from Unity export), replace the 'unityObject.embedUnity' link with your own link to your .html file located on your server.
To embed the player in your page using an iframe add:
Lock and load.
Hope this helps.
^_^
Related
I am having a problem with iframes on iOS (Safari).
We're using a webpage within our webpage through an iframe - it looks great on PC & on Android, but on iOS the whole view is broken and I can't get the scrollable iframe to work on iOS anymore.
We used to fix the iOS scroll issue outside of the iframe itself (in a div) with:
overflow: auto;
-webkit-overflow-scrolling: touch;
position: fixed;
Unfortunately, this isn't working anymore so we took it out.
This is how the iframe looks right now:
<div class="nobottommargin">
<p><iframe style="height: 500px; width: 100%; border: none; top: 0; left: 0;" src="https://url.com" scrolling="yes" allowfullscreen="yes" width="320" height="240"></iframe></p>
</div>
Any idea on how to fix this issue or what other alternatives could be used here?
Edit: what I also tried, without any success:
touch-action: auto on the iframe tag
scrolling="no" on the iframe tag
pointer-events: none
Edit 2: Scrolling is working now BUT while scrolling down, it's cutting my iframe off in the middle. Issue only on iOS again (looks fine on Android & PC).
Here's the working iOS scrolling code with the iframe crop bug that I have:
<div class="scroll-container scroll-ios" style="height:500px;width: 100%; position:relative">
<div class="mainContainer-scroll" style="position:absolute;height:100%;width:100%;min-width:50%;min-height:50%;max-height:500%;top:0;left:0;-webkit-overflow-scrolling: touch !important;overflow-y:scroll !important">
<iframe id="iframe_test" src="url.com" style="height: 100%; width:100%;min-width:100%;" name="myiFrameFix" allowfullscreen="yes" scrolling="yes"> </iframe>
</div>
</div>
Edit 3: What I also tried was, removing all the CSS that tricks the browser into using the GPU:
-webkit-transform: translateZ(0px);
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 1000;
This didn't fix the iframe iOS bug either unfortunately (tried with iOS 9 & 11).
Edit 4: Tried to fix the iframe cropping issue with a script, to make the height of the iframe the same as the whole body. Once again, I was unsuccessful.
<script>
$(function() {
var iframe = $("#iframe_test");
iframe.load(function() {
$("body").height(iframe.height());
});
});
</script>
Check this on your iPhone the scroll works smoothly.
.nobottommargin {
width: 500px;
height: 500px;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
iframe {
height: 100%;
width: 100%;
border: none;
display: block;
}
<div class="nobottommargin">
<iframe src="http://www.weather.gov/" frameborder="0">
</iframe>
</div>
It might be worth including some external JavaScript with a media query to fix this issue, it's currently being applied to every single display.
To fix this. You need to specifically set height on the iframe.
.wrapper {
-webkit-overflow-scrolling: touch;
}
<div class="wrapper">
<iframe
style="height: 500px"
></iframe>
</div>
The hardest part is to get content height of the iframe. You can let iframe tell the parent page by using window.postMessage if you own the iframe. Otherwise you need to check height periodically until you think it is fixed.
var iframe = document.querySelector('iframe');
var setHeight = function(height) {
iframe.style.height = height + 'px';
};
var getHeight = function() {
return iframe.getRootNode().body.scrollHeight;
};
var prevHeight = 0;
var adjustHeight = function() {
var height = getHeight();
if (prevHeight !== height) {
prevHeight = height;
setTimeout(adjustHeight, 2000);
} else {
setHeight(height);
}
};
setTimeout(adjustHeight, 2000);
I've been having this issue for some time now and finally found a fix that works for me by reducing the width of the div disappearing in the iframe. Mine was 100% and reducing to 95% solved it. I'm not sure about the actual max width in px but I think it has to be less than the width of the screen. I tried all the css tricks you mentioned and more, but this is the only thing that has worked.
How can I get an iframe to load the whole page into the next page?
I am a N00b html coder and i was wondering
<center>
Home
<hr>
and loaded it into an iframe, and click on it, it loads inside of the iframe. I want it to load on the entire page.
If I understand you correctly, you want an iframe on a page, but when the iframe is clicked on, you want the page in the iframe to open in a new tab. This is what I did to do this:
<!DOCTYPE html>
<html>
<head>
<style>
div.iframe-link {
position: relative;
float: left;
width: 730px;
height: 330px;
margin: 0 1em 1em 0;
}
a.iframe-link {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div class="iframe-link">
<iframe src="http://en.wikipedia.org" width="750" height="350">
Your browser does not support iframes.
</iframe>
</div>
</body>
</html>
In this iframe, you can still use the scrollbars, but you cannot do anything in the iframe without going to that page. Change the width and the height in div.iframe-link to change the size of the hyperlink part of the iframe. My example has Wikipedia instead of Google.
:)
Also, if you do not want the iframe link to open in a new tab, just change
to
If I understand it correctly, you want to be able to click on a link inside an iframe and open it in the entire window?
In that case you will need to specify a target on your link, as such:
Home
This will make sure that the top frame (i.e. the window) follows the link.
Try this. For me it works
<iframe src="http://www.google.com"></iframe>
I'm trying to embed a vine video in a wordpress page and am having a hard time getting the video to scale when viewed on an iPhone. I haven't really had any luck adding things to the embed code html wise. But that's probably because I'm a total noob.
Here is the code I'd like to have dynamically scale.
<iframe class="vine-embed" src="https://vine.co/v/bVuUeLXBHBF/embed/simple"
width="600" height="600" frameborder="0"></iframe><script async
src="//platform.vine.co/static/scripts/embed.js" charset="utf-8"></script>
I think you forgot to post the code?
<iframe src="https://vine.co/v/bnrtW52x1uJ/card?mute=1"
width="100%" height="100%" frameborder="0"></iframe>
If that is vine embed code, can you just change width/height to percentages if you are currently using pixels?
I was just looking today for an answer..and this worked for me:
Style
.embed-container {
position: relative;
padding-bottom: 100%;
height: 0;
overflow: hidden;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTML
<div class='embed-container'>
<iframe width='100%' src='https://vine.co/v/h9eAhKWzJlv/embed/simple' frameborder='0' scrolling='no' allowtransparency='true'></iframe>
<script async src='//platform.vine.co/static/scripts/embed.js' charset='utf-8'></script>
</div>
Had this same infuriating problem, when my site needed to be responsive. Fiddling with width and height attributes and the styling did nothing for me. I ended up writing a function to calculate the width and height I needed on page load, then writing the iframe into the innerHTML of the contain div element:
function setVineDimensions () {
var dimension = document.getElementById('vine_container').offsetWidth;
document.getElementById('vine_container').innerHTML = '<iframe class="vine-embed" src="https://vine.co/v/XXXXXXXX/embed/simple" width="' + dimension + '" height="' + dimension + '" frameborder="0"></iframe>';
}
setVineDimensions();
Note that the above is just the iframe. When you grab the embed code from Vine there is a script as well. Pop that up in the header and you're good to go.
This solution works only on a page load/refresh. If you're prone to resizing your browser window it won't change.
I am writing a jquery mobile app which needs a map.
For the map I am planning to use Google maps service.
To account for orientation changes, I tried to use something like:
<script>
$('#page-map').live('pagecreate', function(event) {
var map = $('#map_canvas').gmap({
...
});
...
$(window).resize(function() {
$('#map_canvas').width($(window).width());
$('#map_canvas').height($(window).height());
});
)};
</script>
The problem: this code correctly resizes the map canvas when the device is rotated, but it looks like jquery mobile resize() is skipped (the url bar is visible, for example...).
Not even adding to the "resize(function() {" code something like this:
google.maps.event.trigger(map, 'resize');
is of any help.
UPDATE:
The issue only happens on the only mobile device I'm testing my pages - a Samsung Galaxy Mini (GT-S5570), Android 2.3.4 (Gingerbread). It does not happen when resizing window on a desktop PC (i.e: on a desktop browser map_canvas is correctly filled when browser's window is enlarged, even without the resize() binding, only due to width/height at 100% on map_canvas...)
I assign a size through css to my map in jquery mobile
I add the map_canvas inside div with dimencion deuin want in this case 100%
CSS
#map_content {
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;}
#map_canvas {
width: 100%;
height: 100%;
padding: 0;
text-shadow: none;}
HTML
<div data-role="content" id="map_content" data-theme="a">
<div id="map_content">
<div id="map_canvas"></div>
</div>
</div>
I've tried the above answer (plus many others) and nothing worked for me. Actually, the above code was working for me, but just until I started using jQuery Mobile. Somehow, when I load jQuery Mobile (funnily enough, I noticed that it's the JS, no the CSS) the map_canvas has no height (a trick to check the height of the element is adding a border to it like border: 1px solid red;).
Eventually, I managed to solve the auto-resize when the orientation changes by using the following code/css:
<div data-role="page" id="pageID">
<div role="main" class="ui-content">
<div id="map_canvas">
</div>
</div>
</div>
And in the css:
html,
body,
#pageID {
height: 100%;
margin: 0;
padding: 0;
}
.ui-content {
padding: 0;
}
.ui-content,
.ui-content #map_canvas {
height: inherit; /* the trick */
}
So, basically the: height: inherit; solved the problem for me.
Credits: https://jqmtricks.wordpress.com/2014/12/01/content-div-height-css-solution/comment-page-1/#comment-250
I hope it helps!
I am using chrome version 18.0.1025.162 m
I have html file with iframe within it.
i cant change the containing page or its css (main.htm)
i can only change the iframe (show.htm) and its css.
The problem is that when i scroll down and then scroll back up then the adminbar div get replicated several time.
I am attaching 2 screenshots the first one is the screen before scrolling and i also add the code so that the bug can be reproduced.
I think it may be a bug in chrome, i am not sure.
I would like to know if it is a a bug and more importantly if there is a work around by only changing the iframe and that it does not include removing the background color from the iframe.
(removing the background color from the iframe solve the issue but i need the background color)
so this is how it looks:
before scrolling:
after scrolling (admin bar get replicated on screen)
now code to reproduce the bug in chrome
first file - main.htm (i cannot change this code)
<!-- main.htm -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#adminbar
{
background-color: #464646;
height: 28px;
position: fixed;
width: 100%;
top: 0;
}
#body-content
{
float: left;
width: 100%;
}
</style>
</head>
<body >
<div id="body-content">
<iframe src="show.htm" width="100%" height="943"></iframe>
<div id="adminbar" class="" role="navigation">
</div>
</div>
</body>
</html>
and the show.htm
<!-- show.htm -->
<!DOCTYPE html>
<head>
<style type="text/css">
body
{
background: #e0e0e0;
}
</style>
</head>
<body>
<br/>
<p style='margin-bottom:500px;'>bazinga</p>
<p style='margin-bottom:500px;'>bazinga</p>
<p style='margin-bottom:500px;'>bazinga</p>
</body>
</html>
i think i found a workaround.
i created a file background.png which has one pixel with the color i want (#e0e0e0).
i then replace this:
body
{
background: #e0e0e0;
}
with this:
body
{
background: #e0e0e0 url(background.png) repeat-x;
background-attachment: fixed;
}
Add -webkit-transform: translate3d(0,0,0); to your body-content CSS
CSS
#body-content {
float: left;
width: 100%;
-webkit-transform: translate3d(0,0,0);
}
This seems to force Chrome to use your GPU and smooth out the rendering issue.
UPDATE: Since you can't change main.htm, what about changing the background color of show.htm to a background image of the same color? I tested this and it worked. Is that a possibility?
I recreated your setup and then added a script to the body of show.htm. As a quick measure I added a name="if1" to the <iframe /> in main.htm, but you could always find a handle on the element without using an explicitly assigned name.
It seems to solve the issue for the dummy setup that you provided, if and only if main.htm is scrolled all the way to the top. Think it's weird, join the club! See if this works for the real thing... Either way, it may just be a nudge in the right direction! :)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
background: #e0e0e0;
}
</style>
</head>
<body>
<br/>
<p style="margin-bottom:500px;">bazinga</p>
<p style="margin-bottom:500px;">bazinga</p>
<p style="margin-bottom:500px;">bazinga</p>
<script type="text/javascript">
window.onscroll = function(){
console.log("It's 'Doctor' Sheldon Cooper!");
//parent.document.if1.document.body.style.webkitTransform = 'scale(1)';
var _parentScale = parent.document.body.style.webkitTransform;
parent.document.body.style.webkitTransform = _parentScale;
}
</script>
</body>
</html>
I also tried to experiment with the following until it became bed-time!
<script type="text/javascript">
window.onscroll = function(){
console.log("It's 'Doctor' Sheldon Cooper!");
//parent.document.if1.document.body.style.webkitTransform = 'scale(1)';
var _me = document.body;
_me.style.webkitTransform = _me.style.webkitTransform;
//_me.style.display='none';
_me.offsetHeight
//_me.style.display='block';
var _parent = parent.document.body;
_parent.style.webkitTransform = _parent.style.webkitTransform;
_parent.style.display=_parent.style.display;
_parent.offsetHeight
//_parent.style.display='block';
}
parent.window.onscroll = function(){
console.log("But. You're in my spot!");
//parent.document.if1.document.body.style.webkitTransform = 'scale(1)';
var _me = document.body;
_me.style.webkitTransform = _me.style.webkitTransform;
//_me.style.display='none';
_me.offsetHeight
//_me.style.display='block';
var _child = parent.document.if1.document.body;
_child.style.webkitTransform = _child.style.webkitTransform;
_child.style.display=_child.style.display;
_child.offsetHeight
//_child.style.display='block';
}
</script>
I also attempted to apply j08691's answer, using the following script, but it gave slightly unexpected results. I caused the absolute positioned top bar, to not be fixed, among other things!
window.onload = function(){
console.log("It's 'Doctor' Sheldon Cooper!");
var test = parent.document.getElementById("body-content");
test.style.webkitTransform = "translate3d(0,0,0)";
}
One may already exist, but if not, could you file this as a bug report on the relevent projects?
Improving / simplifying yossi's answer:
body
{
background:url('bg.png');
}
no need to declare bg-color or repeat-x, just needs a background image.
Tested on Chrome 18.0.1025.168, Mac OS X 10.6.8.
Remove the float: left; from your #body-content css and it will work just fine.
This looks to be a rendering bug in chrome. If you scroll back up really slowly, you'll notice that you get a solid colour from your admin bar as the colour of your iframe.
Incidentally chrome on OSX renders exactly the same.
#adminbar {
background-color: #464646;
height: 28px;
position: fixed;
width: 100%;
top: 0;
right:0px
}
#body-content {
float: none;
width: 100%;
}
It would help to get a live-demo/version of your actual website to do more thorough testing and sort the bug out.
In any case, I was able to reproduce the bug and then fix it (kind of):
Here's the 'show' css:
body
{
background: #e0e0e0;
height:100%;
width:100%;
z-index:9999;
position:fixed;
}
and Here's the link to my test page:
sotkra.com/t_main.html
last but not least, yes it is a bug and it caused by the flickering of the scrolling of the iframe content against the actual 'base' document. I've seen similar issues before but there was equally no documentation about it. They're just rendering bugs, usually caused by less than specific css or very very odd cases where it's nobody's fault save the browser's.
Cheers
G
Using a gradient as your background image also works. This is preferable for me, because I don't have to create an image file and it doesn't generate an extra request on the client side.
body {
background: #FFF -webkit-linear-gradient(top, #FFF, #FFF) repeat-x;
background-attachment: fixed;
}