Today we will learn how to simply load a website into an iFrame using jQuery. Some of you might have already tried this, but this article is for thoes who have never tried it.

Please see this article in my bog: Load Website to iFrame.

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 we will see how to simply load a website into the IFrame by giving the URL of the website to the src property of the iFrame.

Using the code

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

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

The next part is to create some UI elements as in the following:

  1. <body>
  2. <p id="loadMe">loadMe</p>
  3. <b>Load my website here.</b>
  4. <iframe id="load" src="" ></iframe>
  5. </body>

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

  1. <style>
  2. #load {
  3. position: absolute;
  4. background-color: blue;
  5. color: #fff;
  6. padding: 10px;
  7. border: 1px solid #ccc;
  8. border-radius: 5px;
  9. width: 100%;
  10. height:100%;
  11. display:none;
  12. }
  13. #loadMe {
  14. background-color: blue;
  15. color: #fff;
  16. padding: 10px;
  17. border: 1px solid #ccc;
  18. border-radius: 5px;
  19. width: 80px;
  20. height:30px;
  21. cursor:pointer;
  22. }
  23. </style>

Now we will see the jQuery part.

  1. <script>
  2. $(document).ready(function () {
  3. $('#loadMe').click(function (e) {
  4. $('#load').show();
  5. $("#load").attr("src", "http://www.sibeeshpassion.com/");
  6. });
  7. });
  8. </script>

As in the preceding code snippet, we are firing a click event in the document.ready function and in the click event we are setting the src attribute of the iFrame.

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

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

Output


Figure 1: Output


Figure 2: Displaying the Result

Complete Code

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Load Website to iFrame - Sibeesh Passion</title>
  5. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  6. <style>
  7. #load
  8. {
  9. position: absolute;
  10. background-color: blue;
  11. color: #fff;
  12. padding: 10px;
  13. border: 1px solid #ccc;
  14. border-radius: 5px;
  15. width: 100%;
  16. height:100%;
  17. display:none;
  18. }
  19. #loadMe
  20. {
  21. background-color: blue;
  22. color: #fff;
  23. padding: 10px;
  24. border: 1px solid #ccc;
  25. border-radius: 5px;
  26. width: 80px;
  27. height:30px;
  28. cursor:pointer;
  29. }
  30. </style>
  31. <script>
  32. $(document).ready(function ()
  33. {
  34. $('#loadMe').click(function (e)
  35. {
  36. $('#load').show();
  37. $("#load").attr("src", "http://www.sibeeshpassion.com/");
  38. });
  39. });
  40. </script>
  41. </head>
  42. <body>
  43. <p id="loadMe">loadMe</p>
  44. <b>Load my website here.</b>
  45. <iframe id="load" src="" ></iframe>
  46. </body>
  47. </html>

Conclusion

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