I have a page in html (parent page) that have inside an iframe. When you navigate inside iframe (reload iframe's page or click on link) the parent page remains in its previous position. So i used scrollTop to bring back at the top the page.
All works fine but jquery do it only when the iframe is completely loaded (image inluded..) so this is not well...
How can i scrollTop (PARENT PAGE) before the iframe's page is completely loaded?
Parent page body code:
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$('iframe').load(function(){
$(window).scrollTop(0);
});
});</script>
<iframe frameborder="0" height="1000" id="iframe" src="http://mysite.com" width="800"></iframe>
Thanx!!!
I think you could just do this :
<script type="text/javascript">
jQuery(document).ready(function() {
$(window).scrollTop(0);
});
</script>
perhaps?
$('iframe').ready(function(){
$(window).scrollTop(0);
});
This should work if I'm reading you correctly:
$('.mylink').click(function(){
$('html, body').scrollTop(0);
$('#iframe1').attr('src', 'http://some-other-url');
window.frames["iframe1"].location.reload();
});
Related
For any iframe I have, how do I get it to click anywhere in the iframe to close any popups that open from that iframe?
Something like:
<iframe id="iframe_id" src="https://somesite.com.br">
</iframe>
<script type="text/javascript">
$('#iframe_id').on('click', function(event) {
close popups that have opened ...
});
</script>
NOTE
I can't use sandbox = "allow-scripts" or other sandbox methods
your code:
<script type="text/javascript">
$('#iframe_id').on('click', function(event) {
//code
});
</script>
if those popups are in div then use this
<script type="text/javascript">
$('#iframe_id').on('click', function(event) {
$('#iframe_id').find('div').remove();
});
</script>
though it will remove all div contents if you don't want to include some div contents.
you can just change the div to any form of element if that popup have something in common.
I'm using iFrame Resizer to embed a cross domain iframe on a page. This works well, until I click on a link inside of the iframe that takes me to the next page.
In the iframe source page (the remote one) I've got the following code in the header:
<script src="https://cdn.jsdelivr.net/npm/iframe-resizer#3.6.1/js/iframeResizer.contentWindow.min.js"></script>
In the page that's embedding the iframe I've got:
<iframe id="crelate-iframe" src="https://foo.bar" frameborder="0" width="100%" scrolling="no">
</iframe>
and in the footer of the page:
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/iframe-resizer#3.6.1/js/iframeResizer.min.js?ver=1'></script>
<script>
(function($) {
$(function() {
$('#crelate-iframe').iFrameResize({
log: true,
heightCalculationMethod: 'lowestElement'
});
});
})(jQuery);
</script>
The logging doesn't give away much as far as I can tell. I can only see it initially adjusts the height of the iframe, but when I click through it doesn't and when the next page's height is smaller then I end up with a bunch of white-space at the bottom.
Any ideas what could cause this?
Each page that you load into the iFrame needs script added to it
<script src="https://cdn.jsdelivr.net/npm/iframe-resizer#3.6.1/js/iframeResizer.contentWindow.min.js"></script>
I have 2 pages. I loaded my second page inside my first page.
In the second page i have a link.
The problem is, when I click on the link in the second page, it opens in new tab.
How do I open this link in same page, like an iframe?
Here is my snippet:
$( document ).ready(function() {
$('#second').load('second.html');
});
#second{width:100%; height:300px; border:1px solid blue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
<title>First page</title>
</head>
<body>
<div id="second"></div>
<!--
THis is my second page code ////////
<html>
<head>second page</head>
<body>
click here !
</body>
</html>
-->
</body>
</html>
Name your iframe <iframe name="namedIf"></iframe>
and then in your anchor tag use target attribute <a href="link" target="namedIf"/>
But as the comments says, google doesn't allow you to iframe their content in your site.
UPDATE
As you're not using iframes, the only thing i can think of is to "intercept" any clicks to the anchor tags present on your loaded document and use the same function again to load it.
$(function() {
$('#second').load('second.html', function(){
$("#second a").click(function (e) {
e.preventDefault();
$("#second").load($(this).attr("href"));
});
});
});
So the code gets executed when your code has completed loading second.html into your document.
In the parent page I have an iframe like this:
<iframe src="facts.php" style="width:320px; height:500px; border:hidden" id="facts"> </iframe>
And inside of that iframe I have a jQuery function like this,
<script type="text/javascript">
$(document).ready(function(){
$('#demo').hide();
$('.vticker').easyTicker();
});
</script>
But this function doesn't trigger when the parent page is loaded. Can you please explain me how to solve this?
Try this inside your iframe.
<script type="text/javascript" src="js/Jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#demo').hide();
$('.vticker').easyTicker();
});
</script>
You are facing this issue because the parent JavaScript cannot access the events inside the iframe. You better include the script inside the source of the iframe.
This seems like cross side scripting to me.
First of all try this in your iframe:
<script>
$(document).ready(function()
{
alert("iFrame is ready");
});
</script>
If this does not work, check if you includet jQuery the right way.
Remember: your iframe is a complete selfstanding webside. There is no communication between your main frame and your iframe.
That means if you use Javascript in your iframe you can only manipulate HTML-code inside the iframe.
If you want to manipulate HTML-elements outside of the iframe you need to include the Javascript in your main frame.
i was facing the same issue. i was using relative path to add jQuery file.
<script type="text/javascript" src="js/Jquery.js"></script>
by adding '/' it solved my issue.
<script type="text/javascript" src="/js/Jquery.js"></script>
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.