Steps to create an iframe that opens in a new window

I'm facing an issue with the iframe sourced from flickr.

My website includes an embedded flickr iframe to showcase a gallery without the hassle of creating a slider, resizing images, and extracting thumbnails.

Given that this site belongs to a friend who wants to manage his own pictures without frequent requests for updates, I opted for using a flickr iframe. This way, he can create galleries on flickr and I can embed them directly into the website.

Here is the code snippet:

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

The issue lies in the fact that when a viewer clicks on an image within the iframe, they are redirected to the flickr website, causing them to leave my site.

Is there a way to ensure that when a user clicks on the iframe, the flickr website opens in a new browser window so that the user remains on my site?

Thank you for your help!

javascriptjqueryhtmlcssiframe

Answer №1

Check out this solution:

<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");
});

This code will open a new pop-up window, allowing the user to interact separately with images.

See DEMO here

UPDATED SOLUTION

After much searching and testing, I have come up with a solution that closely resembles what you are looking for. It only requires a click from the user to confirm. If the 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>

View UPDATED DEMO

Answer №2

While there are no guarantees, one option could be to extract the HTML content of galleries using a tool like Jsoup's API. Then, you have the flexibility to modify the content as needed. I personally used this approach in a previous project where the image paths were fixed, and I was able to display them without any issues.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The value entered is being displayed twice every time the onChange event occurs in ReactJS

I recently implemented useReducer in my React project and encountered a strange issue where the values I type are being printed double and twice, as shown in the screenshot below. https://i.sstatic.net/KCkSy.png I'm unsure why this is happening. Here ...

javascriptreactjsnext.js

The custom bullet points are not appearing correctly

I've been attempting to design a custom bullet list, but it doesn't look quite right as I had hoped. The issue is that the spacing appears too close, you can see an example HERE Any suggestions would be greatly appreciated. Thank you ...

csshtml-lists

Customize Bootstrap 4's .btn-link style to include a smooth transition for under

Recently, I've been working on customizing Bootstrap 4's .btn-link by adding a special hover effect - a line that smoothly transitions from left to right beneath the link when the mouse hovers over it. Although things are mostly going according ...

cssbootstrap-4

Reorganizing JSON structures by incorporating unique identifiers into nested elements

I am working on restructuring an incoming JSON object to utilize in a React component. The JSON data that I'm receiving is stored in jsonData. This is the current structure of my code: const jsonData = { "Jonas": { "position": "CTO", "em ...

javascriptjson

Update or overwhelm a node_module file reference

Let's say I have an installed node_module called magicalModule, which was installed using the command npm i magicalModule. To use it in my code, I import it like this: const magic = require('magicalModule'). Now, is there a way for me to o ...

javascriptnode.jsnpmdependency-managementpackage.json

The website is not optimized for mobile viewing

I have recently made an existing website responsive using Twitter Bootstrap. Everything seemed to work fine when I tested it by resizing the browser window, as it perfectly fit in the viewport. However, upon checking the site on mobile and tablet devices, ...

csstwitter-bootstrapresponsive-design

Android textView is populated with randomly generated alphanumeric text after parsing file

I have a parse file coming from parse.com as a string message, and I need to display it in a textView. ParseFile file = message.getParseFile(ParseConstants.KEY_FILE); String filePath = file.getDataInBackground().toString(); if (messageTy ...

javascriptjavaandroidparse-platformtextview

403 Forbidden Error encountered when attempting to incorporate JavaScript

I have encountered an issue with my code where I am trying to grab a form from another website. The PHP code in the header is meant to sanitize the GET string in the URL for security purposes. Essentially, I have a page called order.html which functions pr ...

phpjavascriptajax

"Ensuring Contact Information is Unique: A Guide to Checking for Existing Email or Phone Numbers in

I'm encountering an issue with validating email and phone numbers in my MongoDB database. Currently, my code only checks for the presence of the email but does not respond to the phone number. const express = require("express"); const router ...

javascriptnode.jsmongodbexpressmongoose

suggestion of numerous values in input box through jquery autocomplete

I'm looking for some assistance in modifying my PHP code to allow users to receive auto-suggestions for multiple values. Currently, it functions well for one value, but I would like users to receive auto-complete suggestions for more values (for examp ...

phpjquerymysqlautocomplete

Retrieve the package.json file for a specific package by making an HTTP request to public repositories

I’ve been searching online but haven’t found a satisfying answer to my question yet. My main objective is to generate a dependency tree for a particular npmjs library of a specific version, like retrieving the dependency tree for the angular library v ...

javascriptnpmrepository

The iPage server has encountered a 403 Forbidden Error, preventing

My website is linked with WordPress, but I'm encountering a 403 forbidden error in the sub-menu. Can someone assist me with this issue? I have uploaded a screenshot of the folder in iPage here Additionally, I want my WordPress page to show up correc ...

phphtmlcsswordpresshosting

Navigating to a different webpage using jQuery

There's a quick and easy solution that I'm familiar with but can't recall at the moment. I'm looking to utilize the jQuery get method in a different way - not asynchronous or synchronous. Instead, I want to post the entire page when re ...

jqueryget

Error message found: "Uncaught TypeError: e[n] is undefined while setting up redux store in a reactjs application

Delving into the world of Redux for the first time, I decided to tackle the Todo List example from the official redux.js.org website. After testing the code, everything seemed to be working fine with the redux store initialized only with the reducer as a p ...

javascriptreactjsreduxreact-redux

The overflow:hidden feature is ineffective in Firefox, yet functions properly in both IE and Chrome browsers

I'm in the process of creating a webshop and facing an issue with my sidebar due to varying product counts on different pages. For now, I have implemented the following workaround: padding-bottom: 5000px; margin-bottom: -5000px; overflow: ...

htmlcssfirefox

Asynchronous jQuery operations using promises and finally functionality

I am attempting to interact with a REST api using jQuery's ajax feature. My goal is to return the Promise<Customer> object, but I am encountering an error stating that the property finally is missing. It used to work before, so I assume there h ...

jquerytypescriptrestpromisefinally

Unable to connect List to dropdown in angular

Having trouble connecting dropdown with a List in AngularJS: <select> <option ng-repeat="x in list">{{x}}</option> </select> app.controller('myCtrl', function($scope) { $Scope.list=[{id:1, name='name 1' ...

javascriptjqueryhtmlangularjs

NUXT: Module node:fs not found

Encountering an error when running yarn generate in a Kubernetes container during production. The same command works fine locally and was also functioning properly in production up until last week. Error: Cannot find module 'node:fs' Require stac ...

javascriptnode.jsvue.jsnuxt.jsnode.js-fs

What is the best way to retrieve the current state from a different component?

My goal is to access a user set in another component. I passed the state from the highest component (which is the app) by utilizing this function for state change. handleRegisterSubmit(e, username, password) { e.preventDefault(); axios.post('/au ...

javascriptnode.jsreactjsreact-nativereact-router

Failed to access the 'totalQty' property as it is undefined

I have developed a cart object that can hold products in a shopping cart. The issue arises when an item is undefined before it gets added to the cart. How can I ensure that the cart is defined even when it's empty during the session? I am using ejs. ...

javascriptnode.jsexpressejs