I have an html page with a couple of IFrame loading through external source code. I have no control over the external resources.
When the webpage loads it focuses on the one of the IFrame instead of focusing at the top of the page.
Here is my simple html page:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="topp" tabindex="0"></div>
</head>
<div id="topp" tabindex="0"></div>
<body>
<p id="test">test 1 2 3 4.</p>
<br><br>
<h2>IFrame 1</h2>
<iframe src="https://..../index1.html" width="100%" height="825px;"></iframe>
<iframe src="https://..../index2.html" width="100%" height="825px;"></iframe>
<iframe src="https://..../index3.html" width="100%" height="825px;"></iframe>
<iframe src="https://..../index4.html" width="100%" height="825px;"></iframe>
</body>
</html>
It's focusing on Iframe index3.html, so I have tried to create workaround by including in the page body text some javascript. In this way I can force the page to scroll back to the top as the DOM is being rendered. But it is not working.
Here is what I have tried:
$(document).ready(function(){
$(this).scrollTop(0);
});
Is there a way to find wheter the IFrame loads all the SRC, and then focus on top of the page?
You can replace your JavaScript code with:
window.scrollTo(0, 0);
That line of code will force the page to scroll to the top after loading.
You can add smooth scrolling with this code:
window.scroll({
top: 0,
left: 0,
behavior: 'smooth',
});
I hope this helps.
Related
I'm trying to hide an element in same-origin iframe. However, this son of a bi*ch blinks for a few ms before getting hidden. So what I did was added display: none and remove it after iframe is loaded - great. But now, when user clicks inner page link of iframe, which also contains element to be hidden, it still blinks (because display:none is now removed). I need to detect when to add it again, i. e. just before another page starts to load.
Testing here: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_script
Here is what I tried:
<html class="js">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
html.js #iframeID
{
display: none;
}
</style>
<script>
$(document).ready(function()
{
$('#iframeID').on('load', function()
{
$('#iframeID').contents().find('a').on('click', function()
{
$('html').addClass('js');
console.log('click');
});
console.log('loaded');
$('#iframeID').contents().find('#mySidenav').remove();
$('html').removeClass('js');
});
});
</script>
</head>
<body>
<iframe id="iframeID" height="800px" width="800px" src="https://www.w3schools.com/" ></iframe>
<script>
</script>
</body>
</html>
However, there are some a elements that don't load another page. In this example, try clicking on "TUTORIALS" at the top of that iframed webpage - it just opens up dropdown, not loads another page.
What should I do?
I noticed that "TUTORIALS" link has href="javascript:void(0)". Maybe I should be somehow selecting all a links without such href? But not sure if it's fool proof.
You can make use of load event on the iframe as such,
$('iframe').on('load', function(){
console.log('Iframe Loaded');
});
The iframe's load event is also called every time it's src changes.
$(document).ready(function(){
$('.iFrame_class').load(function(){
console.log('frame loaded');
});
});
Alternatively on start load solution:
Custom attribute for iframe:
iframe class="iFrame" src="some site" started="0"
Put this code to iframed page:
window.parent.$('.iFrame').attr("started","0"); //makes iframe started attr to false on page load
$(document.body).on("click","a", function() {
window.parent.$('.iFrame').attr("started","1");// makes iframe started attr to true for all clicked links
});
And listen; is started attribute changed to 1 on parent page?
I fixed the damn blinking by making 2 iframes and showing 2nd while 1st one is loading. While 1st one is loading, it's also hidden, becomes unhidden after it finishes loading. Anyway, here is my code, should help someone:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
iframe.js
{
display: none;
}
iframe.unclickable
{
pointer-events: none;
}
</style>
<script>
$(document).ready(function()
{
$('#iframeID1').on('load', function()
{
$('#iframeID1').contents().find('a[href!="javascript:void(0)"]').filter('a[target!="_blank"]').filter('a[target!="_top"]').filter('a[target!="_parent"]').on('click', function()
{
$('#iframeID1').addClass('js');
$('#iframeID2').removeClass('js');
});
$('#iframeID1').contents().find('#mySidenav').remove();
$('#iframeID1').removeClass('js');
$('#iframeID2').addClass('js');
$('#iframeID2').contents().find('html').html($('#iframeID1').contents().find('html').html());
});
});
</script>
</head>
<body>
<iframe id="iframeID1" height="800px" width="800px" src="https://www.w3schools.com/" class="js"></iframe>
<iframe id="iframeID2" height="800px" width="800px" src="https://www.w3schools.com/" class="js unclickable" ></iframe>
<script>
</script>
</body>
</html>
See http://plnkr.co/edit/hPyYUCBYvWguyNniCexk?p=preview for a basic example (the original solution is much more complex). The problem is that I cannot scroll the div inside iframe because main page has another div on top. Is there a nice way to fix this (ideally without handling javascript events)?
<html>
<body style="overflow:hidden;">
<div style="position:absolute;top:0;left:0;right:0;bottom:0;z-index:100;background-color: rgba(255,255,255,0.01);">
</div>
<iframe src="main.html" style="width:100%;height:100%">
</iframe>
</body>
</html>
<html>
<body>
<div style="overflow:auto;position:absolute;top:0;left:0;height:2000px;width:2000px">
</div>
<div style="position:absolute;top:0;left:0;right:0;bottom:0;background-color:green;z-index:2;">
</div>
</body>
</html>
Yes, you can add pointer-events: none; style to your div element.
I have these codes:
<html>
<head>
<title>Iframe</title>
</head>
<body>
SomePage<br/>
AnotherPage<br/>
<iframe src="" name="content" height="40%" width="100%"></iframe>
</body>
</html>
as you can see I have two links and one iframe,What i need is when I click SomePage.html link, I want the parent window reloads and then the SomePage.html will be loaded in the iframe, is this possible?, Thanks!
EDITED:
I have an Auto-Resizing iframe that only grows on heights and cannot shrink to smaller heights (well that's my problem here, All I want to achieve is the MasterPage like behavior in asp.net.
This is possible, you can use localStorage it's not cross fully browser. Quick Example.
$(document).ready(function(){
if(localStorage.frameURL) {
$("iframe[name=content]").attr('src', localStorage.frameURL);
}
$("[target=content]").click(function() {
localStorage.frameURL = $(this).attr('href');
window.location.reload();
});
});
I have this simple html page I wish it to scroll automatically to bottom the iframe however the codesimply does not work, it does not scroll down the iframe automatically,
anyone knows whats wrong with it?
<html>
<head>
<script type="text/javascript">
function showLog() {
el = document.getElementById("log")
el.innerHTML='<iframe id="myLogFrame" name="mylog" onload="this.contentWindow.document.documentElement.scrollTop=100" src="http://yahoo.com" width="100%" height="50%" align="middle" scrolling="yes" frameborder="0"></iframe>'
el.scrollTop=el.scrollHeight
}
</script>
</head>
<body onload="showLog()"/>
test1
<div id="log" style="width:100%">
</div></body></html>
Sadly, what you're trying to do is impossible due to the Same Origin Policy which restricts any and all access to documents that are not on your domain.
Your only chance is if the remote page has an anchor to the bottom of the page. If it does, you can link to that anchor. The browser will jump there.
<iframe src="http://yahoo.com#name_of_bottom_anchor">
If your iframe is linked to another domain, web browser will blobk you access iframe's document, so you can access iframes scrollTop.
I have attached the sample code which demonstrates the problem. I am checking this in Firefox 3.5.7. The problem is the parent HTML has a scrollbar, and it loads an iframe which is fullscreen (height: 100%, width: 100%), I want the parent scrollbar to be removed after the iframe is loaded.
1) Is this possible to do?
2) When we give height: 100%; width: 100% why does it occupy only the view area? But not
the full parent occupied area?
This is Main.html
<Html>
<head>
<script type="text/javascript" src="client.js"></script>
<title>
I am a client
</title>
</head>
<body bgcolor="#000000">
You can see the iframe below...
You can see the iframe below...
You can see the iframe below...<br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br>
You can see the iframe below...
<br>
<iframe name="clientframe" id = "clientframe" src = "app.html" style="position:absolute;top:0px;left:0px;width:100%;height:100%;z-index:999;background:#ff0000"
onload = "sendparams();" frameborder="no">
</iframe>
</body>
</html>
This is app.html:
<HTML>
<HEAD>
<title>
I am an Application
</title>
</HEAD>
<BODY>
<h3>This is an application</h3>
<br>
You name <input type="textbox"> <br>
Password <input type="password"><br>
<br>
<br>
<input type="button" value ="Let me in">
</BODY>
</HTML>
NOTE: Open the Main.html, it will load the app.html in a iframe. You can notice that after iframe is loaded a scroll bar appears, and the red background for the iframe does not completely fill the entire parent.
Hide the Parent window scroll bar when iframe is loaded
put this script at top of the Main.html
<script type="text/javascript">
function sendparams() {
document.body.style.overflow = "hidden";
}
</script>
The scrollbars will not hide because your IFrame's height if fixed but the text "You can see the iframe below..." last one crosses the height.
If you remove few (atleast two rows of) <br> then it will work fine as per your requirement.