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.
Related
I have a div that loads information from another page when someone clicks on a thumbnail image on the same page.
Currently, when a person clicks on a thumbnail image, the div #dynamic at the top of the page will load and display information from another page. I want to be able to allow users to click on a close button which i have given a class button_close for them to close the div instead of clicking anywhere within it. The button is being displayed within the #dynamic div as well.
$(document).ready(function(){
$('nav.main > a').click(function(e){
e.preventDefault();
$("#dynamic").load($(this).attr('href') + " .product_content", ()=>{ window.scrollTo(0, 0) }).fadeIn('slow');
});
$(".button_close").click(function(){
$(".product_container").html ('');
});
});
Since your close_button is being generated dynamically, you can use the following
$('body').on('click', '.button_close', function(){
$('#dynamic').html('');
});
A simple example
<!DOCTYPE html>
<html>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function loadDiv() {
$('#dynamic').html('<p>Some content loaded from another page</p><div class="button_close">Close Me</div>');
}
$('body').on('click', '.button_close', function(){
$('#dynamic').html('');
});
</script>
<div id="dynamic"></div><br><br>
<button onclick="loadDiv()">Load Div</button>
</body>
</html>
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.
I'd like to change to set the content in a div using a link
My HTML code:
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
</head>
<body>
dashboard
basic-info
<div id="content"></div>
<script src="scripts/links.js" type="text/javascript"></script>
</body>
</html>
My JS Code:
//inside of links.js
// JavaScript Document
$(document).ready(function() {
$('#content').load("dashboard.html");
});
You need to bind an event listener to the links and you also need to prevent the default action as follows:
$(document).ready(function() {
$('a').on('click', function(e) {
e.preventDefault();//prevents following the link
$('#content').load( this.href );
});
});
You are clicking a link which is pointing at another file so the browser is trying to redirect to this file.
You'll need to prevent the default behaviour of the link and use it as a JS trigger to load the content with Ajax.
$('a').click(function(event) {
event.preventDefault();
var url = $(this).attr('href');
$('#content').load(url);
return false;
});
I have endlessly tried to open iframe links inside either the parent tab or a new tab however I just can't seem to get them to work. When I set the links to target="_parent" the links do nothing and when I set the links to target="_blank" they open in a new tab but also display nothing.
As soon as I get rid of the code that adds the target to the links they work but open inside the iframe which is not what I am trying to accomplish. Any help would be greatly appreciated.
Here is the iframe code that I am using:
<iframe src="js/eventsFrame2.php?EventID=2422308" id="frameclass" frameborder="0" scrolling="no" width="100%" height="600">
Here is the code inside the iframe:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function myFunction() {
$("a").attr('target','_parent');
}
$(window).load(myFunction);
</script>
<script language="javascript" type="text/javascript">
document.write('<script language="javascript" src="http://tickettransaction.com/?bid=1761&sitenumber=18&tid=ticket_results&evtid=2422308"><\/script>');
</script>
If you have control over the content inside the iframe, you could try using the base tag.
Example -- In the page loaded into the iframe include a base tag within the head:
<base target="_top"/>
Have you tried overwriting the parent page (containing the iframe) with your content?
Code inside the iframe:
<script language="javascript" type="text/javascript">
parent.document.write('<script src="http://tickettransaction.com/?bid=1761&sitenumber=18&tid=ticket_results&evtid=2422308"><\/script>');
</script>
Query defines the contents() method to grab the document node, but it doesn't give you a cross-browser way to go from the document to the window, so you're still stuck with:
var iframea = $('iframe').contents().find("a");
iframea.attr('target','_parent');
IMPORTANT: you should always check that the document is with the status "complete" for work with this
var iframe= document.getElementById('iframe_id');
//var iframewindow= iframe.contentWindow
//? iframe.contentWindow : iframe.contentDocument.defaultView;
var preview = previewFrame.contentDocument || previewFrame.contentWindow.document;
if (preview.readyState=="complete")
{
//ok
}
else
{
//perform a recursive call until it is complete
}
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();
});