I dynamically load an iframe with JavaScript. After it's loaded, how can I make it scroll down a specific number of pixels (ie. after the page in the iframe has loaded, how can I make the iframe scroll by itself to the a specified region of the page?)
You can use the onload event to detect when the iframe has finished loading, and there you can use the scrollTo function on the contentWindow of the iframe, to scroll to a defined position of pixels, from left and top (x, y):
var myIframe = document.getElementById('iframe');
myIframe.onload = function () {
myIframe.contentWindow.scrollTo(xcoord,ycoord);
}
You can check a working example here.
Note: This will work if both pages reside on the same domain.
Inspired by Nelson's and Chris' comments, I've found a way to workaround the same origin policy with a div and an iframe:
HTML:
<div id='div_iframe'><iframe id='frame' src='...'></iframe></div>
CSS:
#div_iframe {
border-style: inset;
border-color: grey;
overflow: scroll;
height: 500px;
width: 90%
}
#frame {
width: 100%;
height: 1000%; /* 10x the div height to embrace the whole page */
}
Now suppose I want to skip the first 438 (vertical) pixels of the iframe page, by scrolling to that position.
JS solution:
document.getElementById('div_iframe').scrollTop = 438
JQuery solution:
$('#div_iframe').scrollTop(438)
CSS solution:
#frame { margin-top: -438px }
(Each solution alone is enough, and the effect of the CSS one is a little different since you can't scroll up to see the top of the iframed page.)
Inspired by Nelson's comment I made this.
Workaround for javascript Same-origin policy with regards to using.ScrollTo( ) on document originating on an external domain.
Very simple workaround for this involves creating a dummy HTML page that hosts the external website within it, then calling .ScrollTo(x,y) on that page once it's loaded. Then the only thing you need to do is have a frame or an iframe bring up this website.
There are a lot of other ways to do it, this is by far the most simplified way to do it.
*note the height must be large to accommodate the scroll bars maximum value.
--home.html
<html>
<head>
<title>Home</title>
</head>
<frameset rows="*,170">
<frame src=body.htm noresize=yes frameborder=0 marginheight=0 marginwidth=0 scrolling="no">
<frame src="weather.htm" noresize=yes frameborder=0 marginheight=0 marginwidth=0 scrolling="no">
</frameset>
</html>
--weather.html
<html>
<head>
<title>Weather</title>
</head>
<body onLoad="window.scrollTo(0,170)">
<iframe id="iframe" src="http://forecast.weather.gov/MapClick.php?CityName=Las+Vegas&state=NV&site=VEF&textField1=36.175&textField2=-115.136&e=0" height=1000 width=100% frameborder=0 marginheight=0 marginwidth=0 scrolling=no>
</iframe>
</body>
</html>
Use the scrollTop property of the frame's content to set the content's vertical scroll-offset to a specific number of pixels (like 100):
<iframe src="foo.html" onload="this.contentWindow.document.documentElement.scrollTop=100"></iframe>
A jQuery solution:
$("#frame1").ready( function() {
$("#frame1").contents().scrollTop( $("#frame1").contents().scrollTop() + 10 );
});
Based on Chris's comment
CSS
.amazon-rating {
width: 55px;
height: 12px;
overflow: hidden;
}
.rating-stars {
left: -18px;
top: -102px;
position: relative;
}
HAML
.amazon-rating
%iframe.rating-stars{src: $item->ratingURL, seamless: 'seamless', frameborder: 0, scrolling: 'no'}
Or, you can set a margin-top on the iframe...a bit of a hack but works in FF so far.
#frame {
margin-top:200px;
}
The main issue when programming the scroll is related to getting the whole document embedded into the page, remember than an Iframe would be a full-page (head and all) inside your main doc, for this reason, before actually scrolling, you need to get the inner document, not just the container, so you can actually scrollTo.
We add a validation to sendure compatibility, and the differences betwen contentDocument and windows can be found here
Havign this, the final code would be:
var $iframe = document.getElementByID('myIfreme');
var childDocument = iframe.contentDocument ? iframe.contentDocument : iframe.contentWindow.document;
childDocument.documentElement.scrollTop = 0;
I've also had trouble using any type of javascript "scrollTo" function in an iframe on an iPad. Finally found an "old" solution to the problem, just hash to an anchor.
In my situation after an ajax return my error messages were set to display at the top of the iframe but if the user had scrolled down in what is an admittedly long form the submission goes out and the error appears "above the fold". Additionally, assuming the user did scroll way down the top level page was scrolled away from 0,0 and was also hidden.
I added
<a name="ptop"></a>
to the top of my iframe document and
<a name="atop"></a>
to the top of my top level page
then
$(document).ready(function(){
$("form").bind("ajax:complete",
function() {
location.hash = "#";
top.location.hash = "#";
setTimeout('location.hash="#ptop"',150);
setTimeout('top.location.hash="#atop"',350);
}
)
});
in the iframe.
You have to hash the iframe before the top page or only the iframe will scroll and the top will remain hidden but while it's a tiny bit "jumpy" due to the timeout intervals it works. I imagine tags throughout would allow various "scrollTo" points.
Related
I have a website with a header and a footer. Let's call it domain.com.
Now on a second domain I have 2 files:
page1.php with a height of 1500px page2.php with a height of
800px
Now do I want to add both pages on my domain.com (not at the same time, but with for example domain.com/1 and domain.com/2) with an iframe that shows the full page content (important: of page1.php and page2.php) and adds it between the header and footer.
The iFrame should be without a scrollbar and should look for a user like there is no iFrame.
How can I make a dynamic iFrame that shows the full page (page1.php or page2.php) but also automaticly sets the sizes depending on the page content (as page1.php is larger than page2.php)?
// EDIT:
I forgot to enter important things. The site I want to add as iFrame is a shop website and so is dynamic. There is no fixed height of the site. So I can't use px in height because that would a) show too less (the rest would be "cut out") or show too much (the rest would be simply white). I hope you understant what I mean.
Using <iframe> to display content is a bit dated, but if it's what you want to do, take a look at the following demo:
Demo
Basically, you just need to make sure your scrolling and frameborder attributes are properly turned off:
<iframe src="https://xhynk.com/" scrolling="no" frameborder="none"></iframe>
and it helps to set your CSS to something like this:
iframe {
display: block;
width: 100vw;
height: 400px;
}
display: block removes any inline margin (usually 4px) from the iframe)
width: 100vw will set it to your viewport width (though use 100% instead if you have a sidebar or parent container that's not as wide as the viewport
and set your height to whatever pixel size the content is.
So your domain.com/1 page will look something like this:
<header>Page 1</header>
<iframe src="page1.php" scrolling="no" frameborder="none" style="display: block; width: 100vw; height: 1500px;"></iframe>
<footer>© Jelly</footer>
And domain.com/2 will look something like:
<header>Page 2</header>
<iframe src="page2.php" scrolling="no" frameborder="none" style="display: block; width: 100vw; height: 800px;"></iframe>
<footer>© Jelly</footer>
You may care to read up on the:<iframe> Element Documentation for more information.
For dynamic heights you can only do this if your don't have Cross Domain issues to worry about, but you can modify the height of the window after it's loaded:
Add the onload attribute to your iframe:
<iframe id="iframe1" src="page2.php" scrolling="no" frameborder="none" onload="iframeResize()"></iframe>
JavaScript
function iframeResize() {
var iframe = document.getElementById('iframe1');
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
}
I'm working on a wordpress plugin that is supposed to add a google+ comments section next to an embedded video. I can use javascript to get the correct width initially, but the scripts that auto load in the Iframe document automatically change the size to 100% width if the browser size is changed (see images). I am having serious difficulty accessing the div in the document under the Iframe to change its with to what I want when it resizes.
how it should be.
after adjusting the browser size it jumps below and goes to 100% width.
I'm using thise code to generate the comments section:
<script src="https://apis.google.com/js/plusone.js"></script>
<div id="comments"></div>
<script>
gapi.comments.render('comments', {
href: [URL],
width: 'comments_w',
first_party_property: 'BLOGGER',
view_type: 'FILTERED_POSTMOD'
});
"comments_w" is a variable that is calculated in an earlier javascript based on the space left after the video's width is calculated.
this is the Iframe being gnerated inside the comments div
<iframe frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 1138px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 616px;" tabindex="0" vspace="0" width="100%" id="I0_1480032087207" name="I0_1480032087207" src="https://apis.google.com/u/0/_/widget/render/comments?usegapi=1&href=http%3A%2F%2Fwww.cellcycle.net%2Ftemppage%2F&width=341&first_party_property=BLOGGER&view_type=FILTERED_POSTMOD&origin=http%3A%2F%2Fwww.cellcycle.net&search=&hash=&gsrc=3p&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.CUXyo_wPfp0.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCMYqx5cA6SdMRKSM5YaRVPo-xpcPg#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Cscroll%2Copenwindow&id=I0_1480032087207&parent=http%3A%2F%2Fwww.cellcycle.net&pfname=&rpctoken=30831408" data-gapiattached="true" title="Comment on this"></iframe>
#document == $0
<html est...>
</iframe>
There is a div inside the body that controls the width. I just need to find a way to access it with javascript and change the size whenever the browser is resized. I already have the function I want being called whenever it is resized. I am just having a hard time with getting jQuery to find the element inside the document.
Ok confirmed this is not possible. as Jaromanda X pointed out the origin must be the same. I looked into origin policy here (https://en.wikipedia.org/wiki/Same-origin_policy) and found out for sure. Kind of unfortunate for me, but hope this prevents anyone else from wasting time trying to.
Hi there have a page which has an iframe in it. Now seems that the only way I can get Google map or Blogger on to the site is in another iframe within the main i frame.
Now I have this script which was working to stop the scrolling in the main iframe, iframe_a but how do I get the i frame with Google map and Blogger to not scroll?
I have included that script again within the page which has Blogger and the one which has Google maps on it which gets put in the main i frame_a
Any ideas?
Thanks in advance.
javascript:
HTML5
CSS3
<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
<iframe name="iframe_a" src="home.html" id="iframe_a" onload='javascript:resizeIframe(this);' />
<p>Your browser does not support i frames.</p>
</iframe>
iframe {
overflow: hidden;
background-color:#ffffff;
width: 735px;
height: 0;
border:none;
}
I'm guessing that blogger's iframe is within home.html. I suggest adding the following css to that iframe if you want to remove the scrolling. Note that whatever extends past that iframe would be lost forever.
iframe {
overflow: hidden;
width: 100%;
height: 100%;
}
Might I strongly suggest not using two nested iframes? I don't know your exact situation, but this makes things cumbersome.
EDIT: What's right below this has been answered - see the question below it for the current question that has arisen from that answer.
The below code makes the page fit the screen, and I can size the iframe to be any height or width that I want, and the page will not scroll. THis is what I want. However, I don't just want the page to cut the iframe off. I want the iframe to stretch/shrink to fit the browser window. How can I achieve this efficiently? Can it be done without javascript? If javascript is needed for this, please provide a beginner level explanation, or a good tutorial link; I'm new with JS.
Here is what I have so far:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div class="wrapper">
<iframe id="myIframe" src="https://#.com" border="0" scrolling="no" frameborder="0">
</iframe>
</div>
</body>
</html>
CSS:
body, html {
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
margin: 0;
padding: 0;
}
EDIT! It just so happens that this particular page that I want to use in the iframe here offers a very interesting control feature in the url itself! The url allows size control. So this leads me to ask a new question, which involves using a javascript. My new question is this:
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&"
to dynamically force the size of the iframe content to match the user's browser window?
This will combine the solution to my original question with a secondary solution to provide the perfect fix for my problem here.
(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 unlikely but seemingly possibly additional treat here!)
I think what you are attempting to accomplish can be done with the following in tour CSS
#myIframe {
height: 100%;
width: 100%
}
If you are trying to stretch the content of iframe then.....
You will have to write css that will give proportional height and width to all elements in the iframe document
if the iframe href is not from your domain then there is no way to achieve this.
Overall, there is no way to stretch the content of page so that all things are visible on the screen without scrollbar.
Hi I'm looking help with a mobile site I'm developing. I'm trying to get a page with a toolbar at the top of the screen that has previous and next buttons, with most of the viewport displaying an iframe containing 3rd party websites.
I have a few issues getting this working. The first is to have the toolbar fixed at the top. Mobile browsers don't natively support fixed positioning so I've achieved a workable solution where I move the toolbar back to the top of the screen with the window.onresize event. I can't move the div while scrolling as mobile browsers disable DOM rendering between the touchstart and touchend events.
The main issue I am now having is that the div toolbar displays correctly at the top however the iframe is zoomed to the top left corner of the site it has loaded. You cannot zoom out at all. You can only zoom in further and pan the site. You can only really view the iframe site in 100% of the viewport when it's loaded by itself.
Here's a wireframe of what I want to achieve..
Any help would be much appreciated!
Here's an idea of the code I'm using to achieve this..
There's also javascript that modifies the top and left css values of #wrapper when you scroll the screen using the window.onresize event.
<html>
<head>
<meta
name="viewport"
content="width=device-width;
initial-scale=1;
maximum-scale=1;
minimum-scale=1;
user-scalable=yes;"
/>
</head>
<body>
<div id="wrapper" style="width:320px;top:0;height:86px; position:absolute; z-index:1000; background-color:#FFFFFF; border-bottom:5px solid #4B90B7;">
<!-- Header markup -->
</div>
<div id="iframe" style="height: 750px;position:absolute; top:100px; width:100%" >
<iframe style="width:100%; height:100%">
<!-- iframe -->
</iframe>
</body>
</html>
I'm sure you've moved on by now, but for anyone Googling, I ended up dealing with a similar situation by applying CSS Scale. Re-positioning was a total nightmare, but you can get it to work. This works on an inline scrollview, and I assume it would work on an iframe:
Question/answer here: Scale HTML content using JQuery Mobile & Phonegap
Additionally, it may be worth looking into ChildBrowser vs. iframe. I'm experimenting with it now, but so far it looks useful:
https://github.com/alunny/ChildBrowser
Hope this can help someone!
Just thought I'd chip in another way to do a "fixed" position element in mobile browsers. You can simply give the content element a height and overflow: auto. Make sure the sum of the heights of the fixed header and the content element equals the page height.
<div id="page">
<div id="header">fixed header</div>
<div id="content">...</div>
</div>
#page {
position:relative;
}
#header {
position: absolute;
height: 1.5em;
}
#content {
top: 1.5em;
position:relative;
overflow: auto;
height: 400px;
}
Example: http://jsfiddle.net/william/BWA7j/