Trying to set focus on an iframe on a web page, only when it's visible on the web page!
Considering the situation that we have a long scrollable page and the iframe is placed at the end of the page.
Expectation - As I will scroll the page and set focus on the iframe so as to autoplay the video in that iframe.
If someone can help with this event handling in javascript?
Related
simplified, have a html page in which an iframe is embedded in which a leaflet map is embedded:
<html>
...
<iframe>
...
<div class="leafletMap"></div>
...
</iframe>
...
</html>
on top of the page is a form. on the bottom of the page is the iframe. the page has a scroll bar. if i load the page intially the page is scrolled to the top. if due to user interaction with the page the leaflet map within the iframe is reloaded the page jumps down to the bottom of browser window to the iframe.
aim is that the browser window does not jump to the bottom after a reload of the leaflet map. rather does not jump at all. if due to user interaction the leaflet map gets reloaded there should be no browser scrolling.
tried to overwrite the focus and/or scroll events of the window, iframe and leaflet objects without success. how is it possible to figure out what causes the page jump or how to prevent it in general?
To disable scroll position, on parent page try below:
<script>history.scrollRestoration = "manual"</script>
Or, onunload/beforeunload event of the parent page
window.beforeunload = function(){ window.scrollTo(0,0); }
I have to show a web page in other web page . Iframe is the best option to do that. Everything is okay but i am facing an issue with position of popup inside iframe.
1) I have ketp its position fixed, instead of that it is supporting scrolling. (Not in iframe scrolling but main page scrolling.)
2) it is not coming out from iframe. And not supporting main page position but iframe position. Please help.
.Popup{position:fixed; top:35%;left:50%;margin-left:-100px; width: 180px: padding:10px: }
Thanks in advance
i have a third party html page and an iframe page which is in my control i write html and js for that iframe but which click background html page its dropdow overlaps to my iframe how can i deal with it. i have tried triggering the click and focus event on my iframe page it will not work but when i click manually on my iframe my iframe come over the dropdown control.
i am attaching the snapshot of it.
Is there any way to scroll a page which has an iframe on it back to the top of that iframe when a new page loads inside the frame?
My problem is that we have a booking page and it's quite long the iframe is 1500 pixels high and generally the confirm button is about halfway down that iframe after filling out details etc but the system then sends the user to a verified by Visa/MasterCard page which is quite short and because the original page doesn't scroll back to where the iframe starts the users aren't seeing the verified box and are therefore not confirming so is there a way that every time a new page opens within the iframe my page, original page scrolls back up to where the iframe begins on the page?
You might try something like this:
var iframe = document.getElementById("iframe_id");
iframe.onload = function()
{
iframe.scrollIntoView();
}
Parent webpage jumps / autoscrolls to location of iframe when transition happens within an iframe. Transition happens using jquery mobile - $.mobile.changePage($(#pageName)) [ using an anchor to transition to a div ].
I have gone through various links on stackoverflow e.g., Loading iframe with an #element specified moves the parent viewpoint to the same location (hiding iframe till it loads and page changes but it doesn't solve the issue)
There were few other links that mentioned a) About window.parent scrollToTop when iframe loads but I do not want the parent page to scroll at all when page within an iframe changes. b) Changing focus to parent page when iframe loads but it didn't help too. (Note page transitions to another div in an iframe so it seems we need to use anchor tags as per jquery mobile). Is their a way to stop this parent page autoscrolling ? Any help is appreciated.
Issue was jQuery mobile's focusPage, which was autofocusing content within an iframe. To change this behavior - I added below mentioned javascript in of webpage displayed within an iframe
<script type="text/javascript">
if (self != top) { //if inside iframe
//don't use focusPage for embedded site to prevent autoscroll
$.mobile.focusPage = function ( page ) {
return;
}
}
</script>
Note: This link helped in resolving this issue : When within iframe JQuery Mobile autoscrolls to the iframe top