Place 15 seconds delay in a jQuery script

Question

I have a script that closes an iframe after a click it. I need that when you click on the link inside the iframe has delay 15 seconds to load a page within the iframe and after 15 seconds the iframe automatically closes.

   $(window).on('blur',function(e) {    
    if($(this).data('mouseIn') != 'yes')return;
    $('iframe').filter(function(){
     return $(this).data('mouseIn') == 'yes';
    }).trigger('iframeclick');    
   });

   $(window).mouseenter(function(){
    $(this).data('mouseIn', 'yes');
   }).mouseleave(function(){
    $(this).data('mouseIn', 'no');
   });

   $('iframe').mouseenter(function(){
    $(this).data('mouseIn', 'yes');
    $(window).data('mouseIn', 'yes');
   }).mouseleave(function(){
    $(this).data('mouseIn', null);
   });

   $('iframe').on('iframeclick', function(){
                $(this).hide()
   });

   $('<input type="text" style="position:absolute;opacity:0;height:0px;width:0px;"/>').appendTo(document.body).blur(function(){
     $(window).trigger('blur');
    }).focus();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<iframe style="width:400px;
height:250px;" src="//example.com"></iframe>

Axel Cardinaels · Answer 1 · 2015-03-20T09:36:10.203

1

If you want to stick to Jquery you can use .delay()

http://api.jquery.com/delay/

To wait 15 seconds before the iframe close, you should do this :

$('iframe').on('iframeclick', function(){
                $(this).delay(15000).hide();
}

In a simple way, you put a delay of 15s before the "hide" action

edited Mar 20 '15 at 09:36

answered Mar 20 '15 at 07:34

Axel Cardinaels

168
6

How do I implement it in my script? I'm not good with JavaScript – Murilo Mar 20 '15 at 07:49
Thanks for the help, I implemented in my script but does not work. Did I do something wrong? http://jsfiddle.net/g40bf0f4/ – Murilo Mar 20 '15 at 08:14
2

@AxelCardinaels that is invalid JavaScript syntax `15000ms` – Miguel Mota Mar 20 '15 at 08:45
@Murilo, remove the ms at the end of the duration, it will work. – Axel Cardinaels Mar 20 '15 at 09:38

score 0 · Answer 2 · answered Mar 20 '15 at 07:32

0

You are looking for the setTimeout() method. You can find how to use it here: http://www.w3schools.com/jsref/met_win_settimeout.asp.

In your case would be something like (this can be optimized, take out global var etc.):

 globalVar = null;
 function closeIframe() {
     globalVar.hide();
 }
 $('iframe').on('iframeclick', function(){
      globalVar = $(this);
      setTimeout("closeIframe()", 15000);
 });

answered Mar 20 '15 at 07:32

zozo

8,230
19
79
134

How do I implement it in my script? I'm not good with JavaScript – Murilo Mar 20 '15 at 07:34
Could put an example of this script running in jsFiddle. Please – Murilo Mar 20 '15 at 07:46
Why did you use `setTimeout("closeIframe()", 15000);` instead of `setTimeout(closeIframe, 15000);`? it's better practice and less code – Miguel Mota Mar 20 '15 at 08:53
NEVER EVER EVER EVER pass a string to `setTimeout`! – Ismael Miguel Mar 20 '15 at 09:05

Mathias Vonende · Answer 3 · 2015-03-20T08:42:31.583

0

Use good old setTimeout:

var timeoutValue = 15000; /*ms*/
setTimeout(function(){...}, timeoutValue);

which in you case could look like:

var close = function(element){element.hide();};
$('iframe').on('iframeclick', function(){
  var timeoutValue = 15000;
  var context = $(this);
  setTimeout(function(){close(context)}, timeoutValue);
});

edited Mar 20 '15 at 08:42

answered Mar 20 '15 at 08:34

Mathias Vonende

1,400
1
18
28

score 0 · Answer 4 · edited May 23 '17 at 10:24

Binding event listeners to elements inside the iframe will only work if both the parent site and the iframe are on the same domain. If the contents of the iframe is on a different domain, you won't be able to perform this as it is classed as "click-jacking", which is a big security threat. See http://en.wikipedia.org/wiki/Same-origin_policy

If the iframe is on the same domain then you can add the event listener inside the iframe and then call the parent to notify the event.

You can also grab the contents and find the element you want to bind the event handler on.

$("iframe#name").contents().find(".link").on("click", function() {
    $("iframe#name").delay(15000).hide();
});

score 0 · Accepted Answer · answered Mar 20 '15 at 19:20

0

I used sleep () function and solved my problem!

answered Mar 20 '15 at 19:20

Murilo

49
9

Place 15 seconds delay in a jQuery script

5 Answers5