Change the destination of an iFrame upon user click

Is it possible to redirect an iFrame to a different HTML page when clicked by the user?

I have an iFrame that is essentially an HTML page. When I click on the iFrame, I want it to take me to another HTML page.

This is my code:

         h1 {
            text-align: center;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
         h2{
            text-align: center;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            
         }
         body {   
            background-color: #feb236;
         }
         iframe {
            border: 2px solid black;
         }
         body{
             height: 175vh;
         }
         div{
            border-width: 0 2px;
            border-style: solid;
            position: fixed;
            top: 0;
            bottom: 0;
            right: 400px;
            left: 400px;
            z-index: -1;
         }
<!DOCTYPE html>
<html>

   <head>
      <title>Plagiarism</title>
      <h1><u>PLAGIARISM</u></h1>
      <div></div>
   </head>
   
   <body>
      <h2 style=>What is Plagiarism?</h2>
      <p align="center"><iframe width="400" height="250"></iframe></p>
      <h2>What is Plagiarism in Computer Science?</h2>
      <p align="center"><iframe width="400" height="250"></iframe></p>
      <h2>Famous Cases of Plagiarism</h2>
      <p align="center"><iframe width="400" height="250"></iframe></p>
      <h2>Punishment for Plagiarism in US</h2>
      <p align="center"><iframe width="400" height="250"></iframe></p>
   </body>
   
   
</html>

Answer №1

<html>
<head>
<title>Test IFrame SRC by Using JavaScript </title>

<script>
function ChangeIFrameSource()
{
 document.getElementById("frame1").src = "http://WWW.apple.com";
}
</script>
</head>
<body>
<table>
<tr>
<td>
     <iframe name="frame1" src="http://www.stackoverflow.com" width="600px" height="400px"></iframe>
</td>
</tr>
<tr><td>
<input type="button" value="Change IFrame Source URL" name="btnChangeSrc" runat="server" onclick="ChangeIFrameSource()"/>
</td></tr>
</table>

</body>
</html>

Feel free to use this code for your project.

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

Looking for assistance with my website's navigation bar and logo

Looking for assistance in moving my navigation buttons to each side of the logo. As a beginner in web design and CSS, I've been struggling with this task. Essentially, I want the "home" and "about" buttons on the left side of the logo, 16px apart from ...

Is there a way to trigger the opening of a jQuery-UI-Selectmenu dropdown using the 'ENTER' key instead of the 'SPACE' key as indicated in the documentation?

I'm currently working on implementing jQuery-UI-Selectmenu to create a dropdown feature. As per the API documentation for select menu available at https://api.jqueryui.com/selectmenu/, it mentions that the 'SPACE' key can be utilized to ope ...

The intended 'this' keyword is unfortunately replaced by an incorrect '

Whenever the this keywords are used inside the onScroll function, they seem to represent the wrong context. Inside the function, it refers to the window, which is understandable. I was attempting to use the => arrow notation to maintain the correct refe ...

The functionalities of $scope and this in AngularJS

Currently, I am developing a small application using angularjs. In this project, I am trying to implement a feature that involves deleting a contact. The functionality itself works perfectly fine, however, I am encountering an issue where the 'this.op ...

Passing parameters from a parent component to a child component and then back to the parent component

I have a unique custom component called InputWithButton that has a distinct structure: const InputWithButton = ({ type = "text", id, label, isOptional, name, placeholder = "", value = "", showPasswordReset, error, isDisabled, buttonLabel, handleChange ...

Refresh the current page in Next.js when a tab is clicked

I am currently working on a Next.js page located at /product While on the /product page, I want to be able to refresh the same page when I click on the product link in the top banner (navbar) that takes me back to /product. Is there a way to achieve this ...

Reorganize a list based on another list without generating a new list

Among the elements in my HTML list, there are items with text, input fields, and tables. I also have a specific order list like [3,1,2,0]. Is it feasible to rearrange the items in the HTML list on the page based on this order list without generating a new ...

Display the current page as it appears in AngularJS

I attempted to utilize the ngPrint directive from https://github.com/gilf/ngPrint for printing purposes. However, when I print the page, the design collapses entirely. Is there a solution to maintain the page layout when printing? Please note that Angula ...

Looking to grasp the concept of calling inline functions within a React functional component

As a newcomer to React, I recently created a new view within my company. Following the example of many guides, I have utilized inline functions and function components exclusively. One common practice I have adopted is writing onClick events in this manne ...

Revitalize website when submitting in React.js

I need assistance with reloading my React.js page after clicking the submit button. The purpose of this is to update the displayed data by fetching new entries from the database. import React, {useEffect, useState} from 'react'; import axios from ...

Merging the outcomes of a JSON call

Presently, I have an async function that returns a JSON response in the form of an array containing two objects. Please refer to the screenshot. https://i.sstatic.net/gCP8p.png How can I merge these objects to obtain: [{resultCount: 100, results: Array(1 ...

Incorporating a CSS Module into a conditional statement

Consider the following HTML structure <div className={ `${style.cell} ${cell === Player.Black ? "black" : cell === Player.White ? "white" : ""}`} key={colIndex}/> Along with the associated CSS styles .cell { ...

ngAnimateSwap - animations do not function as intended when boolean expressions are utilized

I adapted the original ngAnimateSwap demonstration from the AngularJS documentation to utilize a boolean expression for triggering the slide animation. Initially, I anticipated the banner to switch back and forth between 'true' and 'false&a ...

Updating the index of an array in MongoDB using Node.js proves to be a challenging task

Currently, I am working on creating an API for a bus ticketing system. However, I am facing difficulties in getting it to function properly in Node.js. [ { "id":1, "hour" : "7:30am" , "seats" : [ 0 , 0, 0, 0, 0 , 0, 0, 0, 0 , 0 ...

- **Rewrite** this text to be unique:- **Bold

Check out this relevant jsFiddle link Below is a list where I aim to make all occurrences of the word 'Bold' bold: <ul id = "list"> <li>Make this word Bold</li> <li>Bold this as well</li> <ul> ...

What is the best way to transfer the value of a <span> element to a different <div> using jQuery or JavaScript

Is there a way to move or copy the price and insert it into the <div class="info"> using jQuery? The code I'm currently using is returning an unexpected result of "102030". jQuery(document).ready(function($) { $(document).ready ...

Changing the position of an image can vary across different devices when using HTML5 Canvas

I am facing an issue with positioning a bomb image on a background city image in my project. The canvas width and height are set based on specific variables, which is causing the bomb image position to change on larger mobile screens or when zooming in. I ...

When the horizontal scroll is turned off, it also disables the functionality of my mobile-friendly

I came across a helpful post on StackOverflow that suggested using the following code to disable horizontal scrolling: html, body { overflow-x: hidden; } This solution did resolve my issue of horizontal scrolling, but unfortunately it caused problems ...

Is the npm mqtt module continuously running but not performing any tasks?

I'm relatively new to the world of JS, node.js, and npm. I am attempting to incorporate a mqtt broker into a project for one of my classes. To gain a better understanding of how it functions, I installed the mqtt module from npm. However, when I tried ...

Having trouble getting Google to show breadcrumbs in search results

I've been trying to implement schema.org's breadcrumb microdata in order to have Google display my breadcrumbs in search results. However, when I check with Google's structured data testing tool, the breadcrumb is not showing in the search r ...