how to make iframe open in new window

Question

I have a problem with the iframe from flickr.

I have a website in which i embed an iframe from flickr in order to display a gallery without having to worry about creating slider and resizing pictures and extracting thumbnails.

Also since this website is for a friend of mine he wants to be able to change his pictures on his own without having to ask me all the time to change the website.

so the solution was to use an iframe from flickr where he created his galleries and i embeded his galleries into the website.

This is the code:

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

My problem is that when a viewer clicks on an image then he is redirected to the flickr website therefore he is gone from my site.

Is it possible to make it when a user clicks on the iframe to open the flickr website in a new browser window so that the user is not lost from my site?

Thank you in advance

I don't think you can unless you have access to the iFrame content (which I assume you don't unless you work for flickr). See: http://stackoverflow.com/questions/4583792/make-links-inside-an-iframe-open-in-a-new-window and http://stackoverflow.com/questions/22808065/how-to-make-all-links-in-an-iframe-open-in-new-tab — Moob, Sep 10 '14 at 18:34
Rather than have an iFrame you could create your own simple gallery. [Here's a very simple demo](http://jsfiddle.net/xu7x9a8t/) it would be fairly trivial to make it into a full slideshow. — Moob, Sep 10 '14 at 19:09

Syed Ali Taqi · Answer 1 · 2014-09-10T19:41:45.553

Try this:

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


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

It will open a new pop-up window and user can interact separately with images in that.

DEMO

UPDATED SOLUTION

After a lot of search and tries, I finally made a solution which is most close to what you want. It will just require a click to confirm from user. If user clicks stay on page the iFrame will be opened in another window.

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


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

UPDATED DEMO

can i make it open only when you click the iframe so that it doesn't pop up when you open the page but rather 1) user opens the page 2)user reads the text blah blah blah 3) user sees pretty photos he clicks on the iframe and display ? — George Georgiou, Sep 10 '14 at 18:42
This is only capturing clicks on the iFrame's wrapper - you can't actually *use* the slider. — Moob, Sep 10 '14 at 19:12

score 0 · Answer 2 · answered Sep 10 '14 at 18:40

0

I'm not sure if it'll work for you but, if you get the content of galleries as HTML using Jsoup's API for example. You can change the content as you need. I did already this in a project I worked, in my case, the images' path was absolute and I had no problem to open it into a dialog.

answered Sep 10 '14 at 18:40

fdam

820
1
11
25

the solution Syed Ali Taqi is suggesting is better. clean and simple just i need a small modification to change only when you click on the iframe – George Georgiou Sep 10 '14 at 18:44

how to make iframe open in new window

2 Answers2