Виджет социальных сетей для guubo.com


Это виджет социальных акций для guubo.com. Виджет Live можно увидеть здесь (хотя вы должны быть подписаны в guubo.com, в противном случае вы увидите вход-выход интерфейса пользователя). JS не мой первый язык, поэтому приветствуются некоторые комментарии.

// create iframe
var iframe      = document.createElement('iframe');

iframe.setAttribute('style', 'border:none; overflow:hidden; width: 93px; height: 32px;');
iframe.setAttribute('scrolling', 'no');
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('allowTransparency', 'true');

document.body.appendChild(iframe);

// access iframe object 
iframe.doc      = null;

if(iframe.contentDocument)
{
    iframe.doc  = iframe.contentDocument;
}
else if(iframe.contentWindow)
{
    iframe.doc  = iframe.contentWindow.document;
}
else if(iframe.document)
{
    iframe.doc  = iframe.document;
}

iframe.doc.open();
iframe.doc.close();


// load CSS to iframe window
var css_object  = document.createElement('link');

css_object.rel  = 'stylesheet';
css_object.type = 'text/css';

css_object.href = 'http://guubo.com/public/css/share.css?' + Math.random();

iframe.doc.head.appendChild(css_object);

var css_object  = css_object.cloneNode('false');

css_object.href = 'http://guubo.com/public/css/reset.css?' + Math.random();

iframe.doc.head.appendChild(css_object);

// load CSS to parent window
var css_object  = css_object.cloneNode('false');

css_object.href = 'http://guubo.com/public/css/share.css?' + Math.random();

iframe.doc.body.innerHTML   = '<a href="http://guubo.com/?url=' + encodeURIComponent(document.location.href) + '&name=' + encodeURIComponent(document.title) + '" target="_blank" class="guubo_ui guubo_share_button" onclick="parent.guuboCreateDialog(); return false;"><?=$share_count?></a>';

function calculateCeneteredPosition(Xwidth, Yheight)
{
    // First, determine how much the visitor has scrolled

    var scrolledX, scrolledY;

    if( self.pageYOffset ) {
        scrolledX = self.pageXOffset;
        scrolledY = self.pageYOffset;
    } else if( document.documentElement && document.documentElement.scrollTop ) {
        scrolledX = document.documentElement.scrollLeft;
        scrolledY = document.documentElement.scrollTop;
    } else if( document.body ) {
        scrolledX = document.body.scrollLeft;
        scrolledY = document.body.scrollTop;
    }

    // Next, determine the coordinates of the center of browser's window

    var centerX, centerY;

    if( self.innerHeight ) {
        centerX = self.innerWidth;
        centerY = self.innerHeight;
    } else if( document.documentElement && document.documentElement.clientHeight ) {
        centerX = document.documentElement.clientWidth;
        centerY = document.documentElement.clientHeight;
    } else if( document.body ) {
        centerX = document.body.clientWidth;
        centerY = document.body.clientHeight;
    }

    return {left: scrolledX + (centerX - Xwidth) / 2, top: scrolledY + (centerY - Yheight) / 2};
} 

function countCharacters()
{
    var guubo_message       = document.getElementById('guubo_message');
    var count_message       = document.getElementById('guubo_count');

    count_message.innerHTML = 116-guubo_message.value.length;
}

function submitForm()
{
    document.forms["guubo_form"].submit();

    guubo_dialog.innerHTML  = 'Message sent to guubo.com!';

    setTimeout(function(){
        guuboCloseDialog();
    }, 1000);
}

function guuboCloseDialog()
{
    document.body.removeChild(guubo_dialog);
}

function guuboCreateDialog()
{
    guubo_dialog        = document.createElement('div');
    var position        = calculateCeneteredPosition(400, 150);

    guubo_dialog.setAttribute('id', 'guubo_dialog');
    guubo_dialog.setAttribute('class', 'guubo_dialog');

    guubo_dialog.setAttribute('style', 'left: ' + position.left + 'px; top: ' + position.top + 'px;');
    guubo_dialog.innerHTML  = '\
    <form name="guubo_form" id="guubo_form" action="http://guubo.com/share3.php" method="post">\
        <div id="guubo_dialog_header">\
            <div class="left"><a href="http://guubo.com" target="_blank">guubo.com</a> – chain share & analytics service</div>\
            <div class="right"><a href="#" onclick="parent.guuboCloseDialog(); return false;">close dialog</a></div>\
        </div>\
        \
        <textarea name="message" id="guubo_message" onKeyDown="countCharacters();" onKeyUp="countCharacters();" maxlength="116">' + document.title + '</textarea>\
        <input type="submit" value="Share" onclick="parent.submitForm(); return false;" />\
        <p><span id="guubo_count"></span> characters remaining. guubo.com will automatically append URL to the message.</p>\
    </form>\
    <div class="clear"></div>';

    document.body.appendChild(guubo_dialog);

    countCharacters();
}


465
4
задан 30 мая 2011 в 10:05 Источник Поделиться
Комментарии
1 ответ

Ваш код задает множество глобальных переменных, и вы всегда должны избегать их. Самый простой способ сделать это ", чтобы обернуть ваш код в замыкание и вручную выставлять только тех переменных на глобальном уровне на глобальном уровне."

Ваш скрипт работает с DOM и связанные объекты DOM. Много целей, которые вы, кажется, пытались достичь в этой области могут быть достигнуты более выразительно, используя надежные модели в хорошей библиотеки, такие как jQuery, прототип, Додзе, или в MooTools. Это почти всегда лучше, чтобы выбрать один из них и изучить API, а не пытаться изобретать колесо. Изменения будет проще, и, скорее всего, ваш код будет более кросс-браузер совместимый. Не использовать такую библиотеку для все под солнцем, но большинство из них охватывают множество общих проблем.

С помощью jQuery, например, в этой строке:

guubo_dialog.setAttribute('style', 'left: ' + position.left + 'px; top: ' + position.top + 'px;');

не нужно зависеть от неловкой конкатенации строк, чтобы задать атрибуты стиля. Вместо этого он мог бы выглядеть гораздо чище и быть более адекватными:

$(guubo_dialog).css({
'left': position.left + 'px',
'top': position.top + 'px'
});

Чтобы сохранить свой стиль кода плотная, рекомендуется использовать JSLint или JSHint, чтобы сказать вам, где вы пошло не так. guubo_dialog, например, должны быть явно объявлены как переменные где-то.

3
ответ дан 29 июня 2011 в 03:06 Источник Поделиться