Load Website to iFrame Using JQuery
Introduction
Hi All, I hope you are fine. Today 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.
[js]
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
[/js]
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>
[/html]
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>
[/css]
Now we will see the JQuery part.
[js]
<script>
$(document).ready(function () {
$(‘#loadMe’).click(function (e) {
$(‘#load’).show();
$("#load").attr("src", "http://www.sibeeshpassion.com/");
});
});
</script>
[/js]
What we so is, we are firing a click event in document.ready function. And in the click event we are setting the src attribute of iFrame
[js]
$("#load").attr("src", "http://www.sibeeshpassion.com/");
[/js]
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
[html]
<!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>
[/html]
Conclusion
I hope you enjoyed reading and found this useful. Please share me your valuable feedback. For me it matters a lot.
Kindest Regards
Sibeesh Venu
