Load website – Sibeesh Passion https://sibeeshpassion.com My passion towards life Fri, 17 Jul 2015 12:26:17 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 /wp-content/uploads/2017/04/Sibeesh_Passion_Logo_Small.png Load website – Sibeesh Passion https://sibeeshpassion.com 32 32 Load Website to iFrame Using JQuery https://sibeeshpassion.com/load-website-to-iframe-using-jquery/ https://sibeeshpassion.com/load-website-to-iframe-using-jquery/#disqus_thread Fri, 12 Jun 2015 05:28:47 +0000 http://sibeecst_passion.com/?p=4811 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

]]> https://sibeeshpassion.com/load-website-to-iframe-using-jquery/feed/ 0