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

Question

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

Я использую функцию Javascript, приведенную ниже, для совместного использования в Twitter (а также для других сервисов; для этого вопроса код функции упрощен до Twitter), который захватывает URL-адрес и заголовок страницы, которая должна быть передана, и вызывается в ссылка с помощью клика. Это приводит к загрузке страницы общего доступа 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

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

Answer 1

Независимо от того, как вы измените свой дизайн, использование 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 таким способом неработать при использовании Twitter.com.Здесь есть подтверждение и некоторые идеи об этом: (например, использование вызовов API из iframe) - http://groups.google.com/group/twitter-development-talk/browse_thread/thread/b1bca9ef074086c7

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

Answer 2

Мой подход заключается в том, чтобы удалить инициализацию 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;
    }
};

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

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

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 3

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

Answer 4

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

<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 5

Я столкнулся с той же самой проблемой, используя плагин jQuery Colorbox.Я пытался создать ссылки «Поделиться в Твиттере» и «Поделиться в Facebook», которые открывались бы в модальной рамке.Когда вы открываете ссылки, появляется модальное окно, однако iFrame будет пустым и будет отображаться только белое поле.

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

Answer 6

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

Уже давно я использую fancybox, я предпочитаю использовать jquery-ui.dialog,Я могу ошибаться ..