0

私は2つのウェブサイトを持っています。1 は私のビジネス サイトで、もう 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
 }
})();

これでRSS購読ボタンをビジネスサイトからiframe化し、ブログにカーソルで表示することができます。

スクリプトの問題: タイマーがあるため、スクリプトが読み込まれると、10 秒後に自動的に閉じます。その部分を太字にします。

しかし

人々がiframeをクリックするだけで閉じる必要があります。またはさらに良いことに、たとえば 5 秒で閉じます。

そのため、ブログの閲覧者が RSS 購読ボタンをクリックすると、ビジネス サイトの RSS フィードに送信され、ブログの javascript/iframe が閉じます。

誰でも私を助けることができますか？

ありがとう！

4

2 に答える 2

1

やりたいことの問題は、iframe内でクリックを検出できないことです。リッスンできるイベントは、カーソルがiframeに出入りする場合のみです。また、このコードはカーソルとともにiframeを移動するため、問題が発生します。

RSSフィードを表示し、カーソルをたどってクリックすると閉じるiframeを表示する理由がよくわかりません。これは比較的悪いユーザーエクスペリエンスのように感じますが、ここで言われていることは、あなたが望むことを実行するいくつかのコードです。上記の問題を回避するには、iframeの上に配置してクリックをキャプチャし、それ自体とiframeを削除する別のdom要素を作成します。このコードには他にもさまざまな問題がありますが、これがお役に立てば幸いです。

(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'));
}
于 2012-06-15T19:23:08.073 に答える