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.
