Click here to Skip to main content
15,867,488 members
Articles / Web Development / HTML

Load Website to iFrame Using JQuery

Rate me:
Please Sign up or sign in to vote.
5.00/5 (7 votes)
16 Jun 2015CPOL1 min read 34.5K   11   3
Load Website to iFrame Using JQuery

Introduction

In this post, we will learn how we can simply load a website to an iFrame using JQuery. Some of you might have already tried this, this article is for the one who never tried the same.

Background

I have been working with an application in which we have a widget called URL widget, we are doing so many things in that widget. Here, I am going to say how we can simply load a website to the iFrame by giving the URL of website to src property of iFrame.

Using the Code

To start with, as always, we need to load the JQuery first.

JavaScript
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Next part is to create some UI elements:

HTML
<body>
    <p id="loadMe">loadMe</p>	
    <b>Load my website here.</b>
	   <iframe id="load" src="" ></iframe>
</body>

Once this is done, we can style those elements by giving some styles as follows:

CSS
<style>
        #load {
            position: absolute;
            background-color: blue;
            color: #fff;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            width: 100%;
			height:100%;
		    display:none;
        }
		#loadMe {
            background-color: blue;
            color: #fff;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            width: 80px;
			height:30px;
			cursor:pointer;
        }
    </style>

Now we will see the JQuery part.

JavaScript
<script>
       $(document).ready(function () {
           $('#loadMe').click(function (e) {
           $('#load').show();
           $("#load").attr("src", "http://www.sibeeshpassion.com/");
           });
       });
   </script>

What we saw is, we are firing a click event in document.ready function. And in the click event, we are setting the src attribute of iFrame.

JavaScript
$("#load").attr("src", "http://www.sibeeshpassion.com/");

The beauty of iFrame is whenever we set the src, it will load that website content to that. So shall we see the output now?

Output

Image 1

Image 2

Complete Code

XML
<!DOCTYPE html>
<html>
<head>
    <title>Load Website to iFrame - Sibeesh Passion</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        #load {
            position: absolute;
            background-color: blue;
            color: #fff;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            width: 100%;
			height:100%;
		    display:none;
        }
		#loadMe {
            background-color: blue;
            color: #fff;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            width: 80px;
			height:30px;
			cursor:pointer;
        }
    </style>
    <script>
        $(document).ready(function () {
            $('#loadMe').click(function (e) {
			$('#load').show();
			$("#load").attr("src", "http://www.sibeeshpassion.com/");
            });
        });
    </script>
</head>
<body>
    <p id="loadMe">loadMe</p>	
    <b>Load my website here.</b>
	   <iframe id="load" src="" ></iframe>
</body>
</html>

Conclusion

I hope you enjoyed reading and found this useful. Please share your valuable feedback. For me, it matters a lot.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
Germany Germany
I am Sibeesh Venu, an engineer by profession and writer by passion. I’m neither an expert nor a guru. I have been awarded Microsoft MVP 3 times, C# Corner MVP 5 times, DZone MVB. I always love to learn new technologies, and I strongly believe that the one who stops learning is old.

My Blog: Sibeesh Passion
My Website: Sibeesh Venu

Comments and Discussions

 
QuestionIframe not working Pin
Member 125889988-Nov-17 10:48
Member 125889988-Nov-17 10:48 
GeneralMy vote of 5 Pin
Mahsa Hassankashi19-Jun-15 10:15
Mahsa Hassankashi19-Jun-15 10:15 
GeneralRe: My vote of 5 Pin
Sibeesh Passion19-Jun-15 16:40
professionalSibeesh Passion19-Jun-15 16:40 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.