How to insert HTML content into an iFrame using jQuery?
Last Updated :
23 Jan, 2023
Here is the task to insert HTML content into an iFrame using jQuery. To do so, we can use the jQuery contents() method.
The .contents() method: It returns all the direct children, including text and comment nodes for the selected element.
Syntax:
$(selector).contents()
- Find the iframe in the body section.
- Get the value to be inserted in the iframe in the body section
- Place the value in the iframe
jQuery code to show the working of this approach:
Example 1:
html
< script src =
</ script >
< style type = "text/css" >
textarea,
iframe {
display: block;
margin: 10px 0;
}
iframe {
width: 500px;
border: 1px solid #000000;
}
</ style >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< h3 >
How to insert HTML content into an iFrame using jQuery
</ h3 >
< textarea rows = "2" cols = "40" style = "text-align:center;" >
GEEKSFORGEEKS - A computer science portal for geeks.
</ textarea >
< button type = "button" onclick = "updateIframe()" >
Click to Insert
</ button >
< iframe style = "text-align:center;" id = "myframe" ></ iframe >
< script type = "text/javascript" >
function updateIframe() {
var myFrame = $("#myframe").contents().find('body');
var textareaValue = $("textarea").val();
myFrame.html(textareaValue);
}
</ script >
|
Output:
Example 2:
html
</ script >
< style type = "text/css" >
iframe {
width: 500px;
border: 1px solid #000000;
}
</ style >
< h1 style = "color:green;" >
GeeksForGeeks
</ h1 >
< h3 >How to insert HTML content
into an iFrame using jQuery</ h3 >
< h4 >Text to be insert : "GEEKSFORGEEKS
- A computer science portal for geeks."</ h4 >
< iframe style = "text-align:center;" id = "iframe" >
</ iframe >
< script >
$("#iframe").ready(function() {
var body = $("#iframe").contents().find("body");
body.append(
'GEEKSFORGEEKS - A computer science portal for geeks.');
});
</ script >
|
Output:
Share your thoughts in the comments
Please Login to comment...