2014-09-10 2 views
-1

У меня проблема с iframe от flickr.Как сделать iframe Открыть в новом окне

У меня есть сайт, на котором я встраиваю iframe из flickr, чтобы отображать галерею, не беспокоясь о создании слайдера и изменении размеров изображений и извлечении эскизов.

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

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

Это код:

<div class="six columns"> 
     <iframe src="https://www.flickr.com/photos/[email protected]/15148138666/in/set-72157647343739461/player/" width="500" height="281" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe> 
    </div> 

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

Возможно ли это сделать, когда пользователь нажимает на iframe, чтобы открыть веб-сайт flickr в новом окне браузера, чтобы пользователь не потерялся с моего сайта?

Спасибо заранее

+0

Я не думаю, что вы можете, если у вас нет доступа к содержимому iFrame (который, как я полагаю, не работает, если вы не работаете для flickr). См. Http://stackoverflow.com/questions/4583792/make-links-inside-an-iframe-open-in-a-new-window и http://stackoverflow.com/questions/22808065/how-to- make-all-links-in-an-iframe-open-in-new-tab – Moob

+0

Вместо того, чтобы иметь iFrame, вы можете создать свою собственную простую галерею. [Вот очень простая демонстрация] (http://jsfiddle.net/xu7x9a8t/) было бы довольно тривиально сделать это в полное слайд-шоу. – Moob

+0

@GeorgeGeorgiou: Пожалуйста, проверьте обновленное решение. –

ответ

1

Попробуйте это:

<div class="six columns"> 
    <iframe name="myFrame"></iframe> 
</div> 


$(document).ready(function() { 
     window.open("https://www.flickr.com/photos/[email protected]/15148138666/in/set-72157647343739461/player/", "theFrame"); 
}); 

Это откроет новое всплывающее окно и пользователь может взаимодействовать отдельно с изображениями в этом.

DEMO

ОБНОВЛЕНО РЕШЕНИЕ

После долгих поисков и попыток, я наконец сделал решение, которое наиболее близко к тому, что вы хотите. Для подтверждения от пользователя потребуется только click. Если пользователь нажмет stay on page, iFrame откроется в другом окне.

$(document).ready(function() { 
window.onbeforeunload = function() { 
window.open("https://www.flickr.com/photos/[email protected]/15148138666/in/set-72157647343739461/player/", "theFrame"); 
return ""; 
} 
}); 


<div id="dv" class="six columns"> 
<iframe id="myFrame" name="myFrame" src="https://www.flickr.com/photos/[email protected]/15148138666/in/set-72157647343739461/player/"></iframe> 
</div> 

UPDATED DEMO

+0

Могу ли я открыть его только тогда, когда вы нажмете на iframe, чтобы он не всплывал при открытии страницы, а скорее 1) пользователь открывает страницу 2) пользователь читает текст blah blah blah 3) пользователь видит красивые фотографии, которые он нажимает на iframe и дисплее? –

+0

Да, есть способ. Позвольте мне обновить код. –

+0

@GeorgeGeorgiou: Смотрите обновленный код и демоверсию. –

0

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

+0

решение Syed Ali Taqi предлагает лучше. чистые и простые, просто мне нужна небольшая модификация для изменения, только когда вы нажимаете на iframe –

Смежные вопросы