Javascript и JQuery (FancyBox) вопрос

Question

Javascript и JQuery (FancyBox) вопрос

Я использую функцию Javascript ниже для совместного использования Twitter (а также другие услуги, код функции упрощается только Twitter на этот вопрос), который захватывает URL-адрес и заголовок для общего доступа, и он вызывается в ссылке с onclick. Это приводит к загрузке страницы в Twitter в окне всплывающего браузера, то есть <img src="/images/twitter_16.png" onclick="share.tw()" />

Чтобы соответствовать другим аспектам дизайна сайта, то, что я хотел бы сделать, это иметь страницу с общим доступом Twitter открыть не в стандартном окне браузера, а в окне Fancybox (jQuery).

Fancybox может загружать внешнюю страницу в iFrame, когда ссылка img или href содержит класс (в данном случае class="iframe") по ссылке и в функции готовности документа в заголовке.

Прямо сейчас, конечно, когда я даю класс iframe ссылке, которая также имеет onclick share.tw(), я получаю два всплывающих окна: всплывающее окно браузера с правильной загруженной страницей на странице Twitter и всплывающее окно Fancybox jQuery, которое показывает сайт 404.

Как я могу изменить функцию, чтобы использовать Fancybox для представления страницы с акциями Twitter? Это правильный подход? Или есть лучший способ, например, реализовать функцию share в jQuery?

Благодаря ...

Javascript функция Доля:

var share = { 
    tw:function(title,url) { 
     this.share('http://twitter.com/home?status=##URL##+##TITLE##',title,url); 
    }, 
    share:function(tpl,title,url) { 
     if(!url) url = encodeURIComponent(window.location); 
     if(!title) title = encodeURIComponent(document.title); 

     tpl = tpl.replace("##URL##",url); 
     tpl = tpl.replace("##TITLE##",title); 

     window.open(tpl,"sharewindow"+tpl.substr(6,15),"width=640,height=480"); 
    } 
}; 

Он вызывается, а именно:<img src="/images/twitter_16.png" onclick="share.tw()" />

функция FancyBox, вызывается путем добавления class="iframe" в IMG или href link

$(".iframe").fancybox({ 
'width' : '100%', 
'height' : '100%', 
'autoScale' : false, 
'transitionIn' : 'none', 
'transitionOut' : 'none', 
'type' : 'iframe' 
}); 

Answer 1

Мой подход будет удалить инициализацию FancyBox и запустить его прямо с вашего доля функции:

var share = { 
    tw:function(title,url) { 
     this.share('http://twitter.com/home?status=##URL##+##TITLE##',title,url); 
    }, 
    share:function(tpl,title,url) { 
     if(!url) url = encodeURIComponent(window.location); 
     if(!title) title = encodeURIComponent(document.title); 

     tpl = tpl.replace("##URL##",url); 
     tpl = tpl.replace("##TITLE##",title); 


     $.fancybox({ 
         'href' : tpl, 
         'title' : title, 
         'width' : '100%', 
         'height' : '100%', 
         'autoScale' : false, 
         'transitionIn' : 'none', 
         'transitionOut' : 'none', 
         'type' : 'iframe' 
         }); 

     return false; 
    } 
}; 

Я не уверен, что мой синтаксис верен, но что-то подобное должно работать на вас.

Другая другая попытка может быть использовать фиктивный якорь, изменить его атрибуты, и триггер нажмите на него:

jQuery(document).ready(function() { 

     $("#dummyLink").fancybox({ 
         'width' : '100%', 
         'height' : '100%', 
         'autoScale' : false, 
         'transitionIn' : 'none', 
         'transitionOut' : 'none', 
         'type' : 'iframe' 
         }); 

     return false; 
    } 
    }; 
}); 
var share = { 
    tw:function(title,url) { 
     this.share('http://twitter.com/home?status=##URL##+##TITLE##',title,url); 
    }, 
    share:function(tpl,title,url) { 
     if(!url) url = encodeURIComponent(window.location); 
     if(!title) title = encodeURIComponent(document.title); 

     tpl = tpl.replace("##URL##",url); 
     tpl = tpl.replace("##TITLE##",title); 

     $("#dummyLink").attr('href', tpl); 
     $("#dummyLink").attr('title', title); 
     $("#dummyLink").trigger('click'); 
     return false; 
    } 
}; 

HTML:

<a href="#" title="" id="dummyLink" style="display:none;"></a> 

Answer 2

Что я вижу, так это то, что функция window.open отвечает за открытие нового окна браузера. Это нужно идти. Вместо этого вы должны установить href ссылки, такой как This is to iframe, а затем вызвать функцию fancybox.

Это было время, так как я использовал FancyBox, я предпочитаю использовать JQuery-ui.dialog, так что я мог бы быть неправильно ..

Answer 3

Я столкнулся с этой же точно вопрос используя плагин jQuery Colorbox. Я пытался сделать Share on Twitter и поделиться ссылками на Facebook, которые откроются в модальной коробке.Когда вы откроете ссылки, появится модальный блок, однако iFrame будет пустым и будет отображаться только белый квадрат.

К сожалению, это ожидаемое поведение. Как на странице совместного использования Twitter, так и на страницах обмена Facebook есть инструкции выйти из фрейма, когда будет следовать ссылка, и, таким образом, пустое поле, которое вы видите. Поскольку контент, предоставляемый соответствующими сайтами, не находится под вашим контролем, нет способа остановить это.

Answer 4

Независимо от того, как вы меняете свой дизайн, использование iframe с Twitter не сработает.

Если вы замените URL http://twitter.com на что-нибудь еще, например http://www.godaddy.com - он будет работать. Я пытался что-то вроде ниже:

$('h1').click(function(e) { 
    $.fancybox({ 
    href : 'http://www.godaddy.com', // http://twitter.com will not work here 
    title : 'twitter window', 
    width : 640, 
    height : 480, 
    type : 'iframe' 
    }); 
}); 

Это потому, что Twitter использует JavaScript, чтобы «сломать» на цели фреймов по соображениям безопасности.

Значит, ваша идея показать FancyBox iframe таким образом не может работать, если вы используете Twitter.com. Существует подтверждение этого и некоторые идеи о том, чтобы обойти его здесь: (например, используя вызовы API из iframe) - http://groups.google.com/group/twitter-development-talk/browse_thread/thread/b1bca9ef074086c7

Для ваших «других услуг», которые, надеюсь, не имеют одинаковых ограничений (я подозреваю, что некоторые из них может), то другой answer further down the page from wajiw кажется хорошим дополнением.

Answer 5

Его невозможно с твиттером, как и другие.
Если вы просматриваете домашнюю страницу источника Twitter, вы увидите небольшой скрипт, подобный этому чуть ниже тега тела.

<script> 
    if (window.top !== window.self) { 
     document.write = ""; 
     window.top.location = window.self.location; 
     setTimeout(function() { 
      document.body.innerHTML = "" 
     }, 1); 
     window.self.onload = function() { 
      document.body.innerHTML = "" 
     } 
    }; 
</script> 

Это означает, что если вы находитесь в iframe (self! = Top), вытащите пустую страницу.
Возможны обходные пути.

Answer 6

Возможно, посмотрите на http://platform.twitter.com/widgets.js и посмотрите, как Twitter создает их всплывающее окно, а затем выяснил, можете ли вы придерживаться этого виджета.