Skip to content

Courses
Tutorials
Practice
Contests

React Tutorial
React Exercise
React Basic Concepts
React Components
React Props
React Hooks
React Router
React Advanced
React Examples
React Interview Questions
React Projects
Next.js Tutorial
React Bootstrap
React Material UI
React Ant Design
React Desktop
React Rebass
React Blueprint
JavaScript
Web Technology

How to invoke JavaScript code in an iframe from parent page ?

How to Insert an Iframe in React ?

Last Updated : 26 Jul, 2024

Comments

Improve

Suggest changes

Like Article

Like

Report

In this article, we are going to insert an Iframe in React JS. The iframe stands for the inline frame. The "iframe" tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders. An inline frame is used to embed another document within the current document.

Prerequisites:

React
NPM

Approach

In this approach, we are using the iframe tag provided in HTML as a JSX, and in the source, we are displaying the React JS Official Site. In this approach, we do not need any dependencies to install on our computer system.

Syntax:

<iframe src="URL" title="description"></iframe>

Example: In this example, we will create an iframe and render a website into that frame.

JavaScript

// App.js import React from 'react'  function App() {     return (         <div className="App" >             <div>                 <h2 style={{ color: 'green' }}>                     GeeksforGeeks                 </h2>                 <h2>                     How to create an Iframe in React                 </h2>                 <iframe width="560"                         height="315"                         src= "https://www.youtube.com/embed/tmg6d3T_T6Q"                         title="GeeksforGeeks" >                 </iframe>             </div>         </div> )}  export default App;

Output

How to invoke JavaScript code in an iframe from parent page ?

N

nikitamehrotra99

Improve

Article Tags :

Web Technologies
ReactJS
React-Questions

Similar Reads

How to use innerHtml in React JS ?

React.js provides a easy way of handling UI updates. However, sometimes you need to inject HTML directly into your components. PrerequisitesIntroduction to ReactReact ComponentsReact HooksNPM or NPXIn this article, we are going to learn how can we use InnerHTML in React JS. We can add HTML into Reac

How to place a div inside an iframe for IE ?

Introduction: An Iframe is used to display a web page (or possibly a document) within a web page, i.e. it loads the contents of a page (or document) inside the current page. Iframe Syntax: <iframe src="URL"></iframe>Approach 1: For adding additional div's in an iframe, you need to use a

How to add code input in React JS?

In this article, we are going to learn how we can add Code Input in React JS. React is a front-end JavaScript library for constructing user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. Approach to add code input: To incorporate our

How to invoke JavaScript code in an iframe from parent page ?

In this article, we will see how to invoke JavaScript code in an iframe from a parent page, along with understanding their implementation through the illustrations. Here, JavaScript methods will be located inside the parent page only but can invoke methods in an iframe and can change or update the c

How to set fullscreen iframe?

To create a fullscreen <iframe> in HTML that covers the entire viewport, you can follow a few key steps involving HTML and CSS adjustments. The iframe element is commonly used to embed other web pages or documents within a webpage. Below is a detailed guide with examples of how to achieve this

How to Install ReactJS on Linux

Installing ReactJS on a Linux system is the first step toward building dynamic, interactive web applications. ReactJS, a popular JavaScript library developed by Facebook, is widely used for creating user interfaces. Setting it up on Linux ensures a smooth development environment for building and run

How to Embed Video in Iframe in HTML?

You can use Iframe to show videos on your web page and embedding videos are very simple. To do so you can use the iframe tag directly in your HTML. Let's see how we can embed the video in the iframe. Embedding Videos in HTMLTo embed a video, use the iframe tag with the video's URL. Set the width, he

How to Drawing Canvas in React.js ?

In this article, we are going to learn how we can add drawing canvas in ReactJs. React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. Prerequisites:NodeJS or NP

How to embed SVG element in an iframe ?

In this article, we will learn how to embed an SVG into an iframe. It is an HTML element that represents nested browsing contexts, allowing one HTML page to be embedded inside of another. It has many attributes but here we discuss src and srcdoc attributes to solve this problem. The iframe src attri

How to integrate React-PDF in ReactJS ?

React-PDF is a package that helps users to display PDF files in their React app. By using the react-pdf package we can add PDF files in our React app as if they were images. To use the latest version of react-pdf package, our project should use React 16.3 or later. We can integrate react-pdf using t

Corporate & Communications Address:

A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)

Registered Address:

K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305

Advertise with us

Company
About Us
Legal
Privacy Policy
In Media
Contact Us
Advertise with us
GFG Corporate Solution
Placement Training Program

Languages
Python
Java
C++
PHP
GoLang
SQL
R Language
Android Tutorial
Tutorials Archive

DSA
Data Structures
Algorithms
DSA for Beginners
Basic DSA Problems
DSA Roadmap
Top 100 DSA Interview Problems
DSA Roadmap by Sandeep Jain
All Cheat Sheets

Data Science & ML
Data Science With Python
Data Science For Beginner
Machine Learning
ML Maths
Data Visualisation
Pandas
NumPy
NLP
Deep Learning

Web Technologies
HTML
CSS
JavaScript
TypeScript
ReactJS
NextJS
Bootstrap
Web Design

Python Tutorial
Python Programming Examples
Python Projects
Python Tkinter
Python Web Scraping
OpenCV Tutorial
Python Interview Question
Django

Computer Science
Operating Systems
Computer Network
Database Management System
Software Engineering
Digital Logic Design
Engineering Maths
Software Development
Software Testing

DevOps
Git
Linux
AWS
Docker
Kubernetes
Azure
GCP
DevOps Roadmap

System Design
High Level Design
Low Level Design
UML Diagrams
Interview Guide
Design Patterns
OOAD
System Design Bootcamp
Interview Questions

Inteview Preparation
Competitive Programming
Top DS or Algo for CP
Company-Wise Recruitment Process
Company-Wise Preparation
Aptitude Preparation
Puzzles

School Subjects
Mathematics
Physics
Chemistry
Biology
Social Science
English Grammar
Commerce
World GK

GeeksforGeeks Videos
DSA
Python
Java
C++
Web Development
Data Science
CS Subjects

@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy

Improvement

Suggest Changes

Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.

geeksforgeeks-suggest-icon

Create Improvement

Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.

geeksforgeeks-improvement-icon

Suggest Changes

min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences

Admission Experiences

Career Journeys

Work Experiences

Campus Experiences

Competitive Exam Experiences