I have embedded a website using iframe.
Whenever the parent page loads, the embedded page makes the parent page scroll down to the iframe. I cannot change any code in the embedded page, only the parent page.
Here's the [fiddle of the issue][1]:
HTML:
<iframe src="http://store.ecwid.com/#!/~/cart" width="100%" height="100%" id="Container"></iframe>
CSS:
body { margin-top: 100px; height: 1000px; }
How can I prevent the parent page from scrolling down to the iframe?
IMPORTANT UPDATE: ALMOST THERE
So we've added the following javascript to force the page to scroll bacl to the top:
window.addEventListener("scroll", runOnScroll);
function runOnScroll(){
window.scrollTo(0, 0);
window.removeEventListener("scroll", runOnScroll);
}
It does work as you can see [in this fiddle][2]. However, on the iPad and iPhone, you can clearly see the page scolling back then up again. On the PC, you can't see the transition.
Please visit [this website][3] so you can check both transitions (pc and mobile).
I'd like to know if there is anything we can add to the code so:
the transition in mobile is not noticed like in the pc (preferred choice)
OR
the transition is smoother (slower scrolling or something like that)
Ok, I added a bit of JavaScript that listens to the first time the document is scrolled down. When the document is scrolled down for the first time, it'll force itself back to the top, then it'll remove the listener so that the user may scroll as desired afterward.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css"></link>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<iframe src="http://store4549118.ecwid.com/#!/~/cart" width="100%" height="100%" id="Container"></iframe>
<script src="scripts.js"></script>
</body>
</html>
JAVASCRIPT (In a file named scripts.js)
window.addEventListener("scroll", runOnScroll);
function runOnScroll(){
$('html,body').animate({scrollTop: 0},1000);
window.removeEventListener("scroll", runOnScroll);
}
Give it a shot, and let me know if it works!
Related
It seems Chrome and Firefox have two different interpretations of scrollIntoView() when it comes to iframes. In Chrome, the scrolling only applies to elements until a position:fixed ancestor element is found, whether it is in the iframe or parent frame. But in Firefox, it is not just any ancestor that has position:fixed; there seems to need to be an unscrollable ancestor element in the parent frame also, otherwise the parent frame will still scroll.
I want to prevent Firefox from scrolling the parent frame in this case. So far the only solution I have found is making an element in the parent frame be position:fixed, but as you can imagine that will ruin the parent frame's layout if you don't want a fixed element and want the page to flow (eg, if the iframe is embedded within a long blog post).
Note that I do NOT have control over the iframe (it is cross domain also), otherwise I could just switch scrollIntoView() with scrollTo().
Here is a concrete example you can test:
<html>
<head>
<title>Parent frame</title>
<style>
html { scroll-behavior:smooth; }
</style>
</head>
<body>
<iframe src="iframe.html" style="height:200px;"></iframe>
<div style="height:10000px;">parent</div>
</body>
</html>
<html>
<head>
<title>Child frame</title>
<style>
</style>
<script>
setTimeout(function() {
var bottom = document.getElementById("bottom");
bottom.scrollIntoView();
}, 2000);
</script>
</head>
<body>
<div id="someParent" style="height:200px;position:fixed;overflow:scroll;">
<div style="height:5000px;">iframe</div>
<div id="bottom" style="background-color:red;">bottom</div>
</div>
</body>
</html>
I'm a real amateur when it comes to coding. I'm trying to embed a webpage into a dashboard, just using notepad to write the HTML, got some, but limited, coding experience.
The webpage I'm embedding has fixed items down the page, and so far I've managed to get the page to jump down the page, stopping at each of these articles. Note the site I'm embedding is external - I don't own it.
I've got this HTML code, which includes some javascript to make the iframe the correct size for the embedded page automatically.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dashboardtest</title>
<style>
iframe{
width: 49%;
border: 4px solid #CB0F0F;
}
</style>
</head>
<body onload="pageScroll()" bgcolor="33ACFF">
<h1 style="font-family:Pacifico">Polls... the Results are In!</h1> <iframe src="https://yearbook.com/s/polls/" height="600px" id="myIframe"></iframe>
<script>
// Selecting the iframe element AUTO HEIGHT CODE
var iframe = document.getElementById("myIframe");
// Adjusting the iframe height onload event
iframe.onload = function(){
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
}
</script>
</body>
</html>
Previously, I had this code:
<html>
<head>
<title>previousdashboardtest</title>
<meta http-equiv="refresh" content="10">
<script type="text/javascript">
<!--
function pageScroll() {
window.scrollBy(0,392);
scrolldelay = setTimeout('pageScroll()',1000); //Increase this # to slow down, decrease to speed up scrolling
window.setInterval(function scrollWin(){
/// call your function here
}, 5000);
}
//-->
</script>
</head>
<body onload="pageScroll()">
<iframe src="https://yearbook.com/s/polls/" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" width="100%"
height="45000px" style="padding: 0; margin: 0; border: 0;"></iframe>
</div>
<script>
function scrollWin() {
window.scrollTo(0, 0);
}
</script>
</body>
</html>
It scrolled down perfectly, stopping at each item down the page. But the whole window was scrolling, meaning that the other text I have on the page would scroll out of view.
Hence I embedded the page as an iFrame, and just want to scroll the Iframe.
Is this possible? Or do I need to try some other way.
Ideally in the end I'd like it to scroll down to the bottom of the Iframe, and then loop back to the top indefinitely.
Note: The page I'm embedding requires a login, so best to use some other page if testing.
Chrome v75 appears to have introduced a bug whereby if you replace an iFrame's src programatically, it will replace the entire page instead of the iFrame.
This didn't happen on v74 and I can't get a test case to work (yet), it just fails in our site. (The site hasn't changed since going from v74 to v75, only Chrome has changed)
It appears to work fine the first time but then when you change it again (in our case viewing report drill downs) it causes the entire page (i.e. the iFrame's Parent) to load the src you were trying to load into the iFrame.
It also doesn't matter if you use pure Javascript or (in our case) JQuery, both cause the same issue.
EDIT: After a few hours detective work, I've found the bug. Setting the tag in the iFrame's content causes Chrome to load the iFrame's content into it's parent rather than the iFrame itself.
I've setup a Plunker account with a demo: https://plnkr.co/edit/UQ0gBY?plnkr=legacy&p=info
Just so I can post the link to Plunker, here is the code for the main file & the iframe content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function onLoaded() {
// find element
let button = document.getElementById("button");
button.addEventListener("click",function(e){
// Add a random number on the end as a cache buster
document.getElementById('frame-finance-custom').src = 'test2.html?rnd=' + Math.random();
},false);
};
document.addEventListener('DOMContentLoaded', onLoaded, false);
</script>
</head>
<body>
<div>IFrame Src Changing Test</div>
<div>
<div id="div-frame-finance-custom" style="float:left;width:33%">
<iframe id="frame-finance-custom" name="frame-finance-custom" class="iframe"
style="border:1px solid black; width: 100%; height: 350px; overflow-y: scroll; vertical-align: top;">
no data
</iframe>
</div>
<div style="float:left;margin-left:1em;">
Detail: Loading an iframe page with a <Base> tag in it with target set to "_parent" will cause any refresh of that frame to replace the parent document<BR>
<BR>Instruction: <UL><LI>Click the 'Update Frame' Button, this will load test2.html into the frame. <LI>Click it again & it will replace the iframe's parent with the content of the iFrame.</UL>
<BR>Confirmation: Remove the <Base> tag from the header of test2.html & reload, it will work as expected.
</div>
</div>
<br clear=both>
<div>
<button id="button">
Update Frame
</button>
</div>
</body>
</html>
IFrame Content (test2.html):
<!DOCTYPE html>
<html lang="en">
<head>
<base target="_parent"/>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>This is the frame content</div>
</body>
</html>
Note, using their new layout it doesn't work, but using their legacy layout it does. Feel free to save the files locally and use chrome directly too.
Ok, so this turned out to be a bug in Chrome rather than anything else, so yes, strictly not a SO question, but seeing as SO ranks so well in Google (other search engines are available), I thought it better to leave it here as a solution rather than simply delete it, just incase anyone else has a similar problem.
The reason is outlined as an edit in my question, the solution is to remove the <base target="_parent"> tag from the iFrame and programatically add the 'target="_parent"' attribute to any links in the iFrame.
We do this via jQuery, I'm sure its just as easy via vanilla Javascript.
$('a').attr('target','_parent');
Add that to the javascript that runs when a page has loaded and it'll replace add target="_parent" to any links on the page.
e.g.
<script>
function onLoaded() {
// find all links and add the target attribute
$('a').attr('target','_parent');
};
document.addEventListener('DOMContentLoaded', onLoaded, false);
</script>
As #Kaiido says in his comment, its apparently fixed in Chrome v77, but this isn't the current (as of June 2019) stable release, so we've had to add the workaround into production so that our CRM works with Chrome v75. Thanks to #Kaiido for confirming that.
I've been working all day to sort this out and still no closer. I have a Electron app which loads multiple webviews. I am trying so that once one of the webviews fully loads the scroll position is moved 200px down the page.
I would have thought I would have to user Jquery to do this however what I have below has no effect with no errors in the console. Any pointers would be great,
thanks
HTML
head
<head>
<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
webview
<div class="demo">
<webview id="wv1" src="https://www.github.com/" style="display:inline-flex; height: 180px; width: 100%; "></webview>
</div>
jquery
<script>
$( "div.demo" ).scrollTop( 200 );
</script>
window.onload doesn't seem to work well with webviews. The event listener waits for the dom-ready event to inject the scroll instructions into the webview. This has to be done for every webview. A JS file could be injected with the preload attribute.
const webview = document.querySelector('#webviewId')
webview.addEventListener('dom-ready', () => {
webview.executeJavaScript(
'document.documentElement.scrollTop = document.body.scrollTop = 200;');
})
I have the following Javascript code.
When the page is loaded it is scrolled to the right position. When I click on the link to run the function the page scrolls to the top of the page.
How do I fix this?
<html>
<head>
<script type="text/javascript">
function scroll() {
window.scrollTo(0, 400)
}
</script>
<title></title>
</head>
<body onload="window.scrollTo(0, 400)">
<img src="a.jpg"/>
comments1
</body>
</html>
Use
onclick="scroll(); return false;"
that should fix it.
To add a bit more detail, with the return false;, the click event continues after the page is scrolled, and the click event follows the href to #, which is the top of the page. An alternative way to fix this is:
comments1
Returning false is better, IMO, but this would also do the trick.