如何'onclick'关闭javascript 5秒后?

时间:2012-06-15 17:55:45

标签: javascript function iframe onclick

我有两个网站。 1是我的商业网站,其他是我的博客。

我的博客收到了大量流量,我希望通过其他网站获取流量。

我在下面发现了这个javascript:

(function(){

 var Xcord = 0,
 Ycord = 0,
 IE = document.all ? true : false;

 if (!IE) document.captureEvents(Event.MOUSEMOVE);

 var lbox = document.createElement('iframe');
 lbox.src = 'http://mybusinesssite.com/rssfeed';
 lbox.scrolling = 'no';
 lbox.frameBorder = 0;
 lbox.allowTransparency = 'true';
 lbox.style.border = 0;
 lbox.style.overflow = 'hidden';
 lbox.style.cursor = 'pointer';
 lbox.style.width = '120px';
 lbox.style.height = '10px';
 lbox.style.position = 'absolute';
 lbox.style.opacity = 100;
document.getElementsByTagName('body')[0].appendChild(lbox);

window.addEventListener('mousemove', mouseMove, false);

 setTimeout(function(){
document.getElementsByTagName('body')[0].removeChild(lbox);
window.removeEventListener('mousemove', mouseMove, false);
 }, 10000);

 function mouseMove(e) {
 if (IE) {
 Xcord = event.clientX + document.body.scrollLeft;
 Ycord = event.clientY + document.body.scrollTop;
 } else {
 Xcord = e.pageX;
 Ycord = e.pageY;
 }

 if (Xcord < 0) Xcord = 0;
 if (Ycord < 0) Ycord = 0;

 lbox.style.top = (Ycord - 5) + 'px';
 lbox.style.left = (Xcord - 60) + 'px';

 return true
 }
})();

有了这个我可以iframe我的RSS订阅商业网站按钮并通过光标在我的博客上显示。

脚本的问题:它有计时器,因此当加载脚本时,它会在10秒后自动关闭。我将用粗体标记该部分。

BUT

我需要这样,当人们只点击iframe时它会关闭。或者甚至更好,它将在5秒内关闭,例如。

因此,当我的博客上的观看者点击RSS订阅按钮时,他们将被发送到我的商业网站的RSS订阅源,我的博客上的javascript / iframe将关闭。

有人可以帮帮我吗?

谢谢!

2 个答案:

答案 0 :(得分:1)

这是设置在5000毫秒(5秒)后执行的函数:

setTimeout(function() {alert('Do something here!!!');},5000);

答案 1 :(得分:1)

您想要做的问题是您无法检测到iframe中的点击。您可以监听的唯一事件是光标是否进入或离开iframe。并且由于此代码使用光标移动iframe,这会增加问题。

我不确定为什么你要显示一个显示rss feed的iframe,然后跟随你的光标并点击它关闭它。我觉得这是一个相对糟糕的用户体验,但在这里说的是一些代码可以做你想要的。通过创建位于iframe顶部的另一个dom元素并捕获点击并删除自身和iframe,它解决了我上面提到的问题。这段代码还有其他各种问题我不会介入,但希望这会有所帮助。

(function(){

    var Xcord = 0,
    Ycord = 0,
    IE = document.all ? true : false;

    if (!IE) document.captureEvents(Event.MOUSEMOVE);

    var lbox = document.createElement('iframe');
    lbox.id = 'mybusinesssite-rss-iframe';
    lbox.src = 'http://mybusinesssite.com/rssfeed';
    lbox.scrolling = 'no';
    lbox.frameBorder = 0;
    lbox.allowTransparency = 'true';
    lbox.style.border = 0;
    lbox.style.overflow = 'hidden';
    lbox.style.width = '120px';
    lbox.style.height = '10px';
    lbox.style.position = 'absolute';
    lbox.style.opacity = 100;
    document.getElementsByTagName('body')[0].appendChild(lbox);

    var lboxdiv = document.createElement('div');
    lboxdiv.id = 'mybusinesssite-rss-overdiv';
    lboxdiv.style.width = '120px';
    lboxdiv.style.height = '10px';
    lboxdiv.style.position = 'absolute';
    lboxdiv.style.cursor = 'pointer';
    document.getElementsByTagName('body')[0].appendChild(lboxdiv);

    window.addEventListener('mousemove', mouseMove, false);
    document.getElementById('mybusinesssite-rss-overdiv').addEventListener('click', removeMyBusinessSiteIframe);

    function mouseMove(e) {
        if (IE) {
            Xcord = event.clientX + document.body.scrollLeft;
            Ycord = event.clientY + document.body.scrollTop;
        } else {
            Xcord = e.pageX;
            Ycord = e.pageY;
        }

        if (Xcord < 0) Xcord = 0;
        if (Ycord < 0) Ycord = 0;

        lbox.style.top = lboxdiv.style.top = (Ycord - 5) + 'px';
        lbox.style.left = lboxdiv.style.left = (Xcord - 60) + 'px';

        return true
    }
})();

function removeMyBusinessSiteIframe(e) {
    e.preventDefault();
    document.getElementsByTagName('body')[0].removeChild(document.getElementById('mybusinesssite-rss-overdiv'));
    document.getElementsByTagName('body')[0].removeChild(document.getElementById('mybusinesssite-rss-iframe'));
}