Load Website to iFrame Using JQuery

Sibeesh Passion

5.00/5 (7 votes)

Jun 16, 2015

CPOL

1 min read

36327

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.

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

Next part is to create some UI elements:

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

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

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

$("#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

Complete Code

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