Sometimes we like to embed or load contents from other web pages or external web pages. This can easily be done with jQuery. The position and size of the embedded contents can be adjusted with the use of CSS.

Let’s take an example to illustrate how to use jQuery to load an external web page.

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery Load External Web Page</title>

    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function() {

            $('#loadExternalWebPage').load('test.html');

        });    

    </script>

</head>

<body>

    <h1>jQuery Load External Web Page</h1>
    <p>The contents below load from external web page.</p>

    <div id="loadExternalWebPage"></div>

</body>
</html>

With the use of jQuery load() method, an external web page can easily be loaded into a selected element as shown in the diagram below:

Demo:

jQuery Example File:

Click here to download.

This post discuss how to use PHP to load an external web page.