How to Get a Remote Web Page With JavaScript

Written by cathlene s. baptista
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Get a Remote Web Page With JavaScript
You can use JavaScript to open remote web pages using a variety of techniques. (John Foxx/Stockbyte/Getty Images)

JavaScript is a lightweight programming language that is typically embedded directly into web pages, executed when loaded in a web browser and is capable of performing tasks such as opening remote web pages. JavaScript has the ability to access browser objects that can alter the way the web browser behaves, DOM objects that can access the W3C DOM properties and methods, and built-in objects that can perform a wide variety of common tasks. JavaScript also offers a variety of built-in events that can respond to user interaction.

Skill level:
Easy

Other People Are Reading

Things you need

  • Text editor
  • JavaScript-enabled web browser

Show MoreHide

Instructions

  1. 1

    Open a text editor and create a new file. Type some HTML code in the file that writes a message to the screen that explains that this is a page being called using JavaScript. Name the page windowRemotePage.html. Save and close windowRemotePage.html.

    <html>

    <head>

    </head>

    <body>

    <h1>This is a remote page called using the JavaScript window object.</h1>

    </body>

    </html>

  2. 2

    Reopen the text editor and create a new file. Type an "<html>" open tag and an "</html>" close tag, a "<head>" open tag and a "</head>" close tag, and a "<body>" open tag and a "</body>" close tag in the file. Place an open "<script type="text/javascript">" tag and a close "</script>" tag between the "<head>" and "</head>" tags. The "<script>" and "</script>" tags indicate where to place the JavaScript code. Save the file as "winLoc.html" in the same location as windowRemotePage.html.

    <html>

    <head>

    <script type="text/javascript">

    </script>

    </head>

    <body>

    </body>

    </html>

  3. 3

    Edit winLoc.html. Place the JavaScript code that opens a page between the "<script>" and "</script>" tags. This code instructs the window object to set its location to the indicated page (windowRemotePage.html). Save winLoc.html.

    <html>

    <head>

    <script type="text/javascript">

    window.location="windowRemotePage.html" </script>

    </head>

    <body></body>

    </html>

  4. 4

    Open winLoc.html in a web browser. The window.location code will execute and windowRemotePage.html will open and display.

  1. 1

    Open a text editor and create a new file. Type some HTML code in the file that writes a message to the screen that explains that this is a page being called using JavaScript. Name the page documentRemotePage.html. Save and close documentRemotePage.html.

    <html>

    <head>

    </head>

    <body>

    <h1>This is a remote page opened using the JavaScript document object.</h1>

    </body>

    </html>

  2. 2

    Reopen the text editor and create a new file. Type an "<html>" open tag and an "</html>" close tag, a "<head>" open tag and a "</head>" close tag, and a "<body>" open tag and a "</body>" close tag in the file. Save the file as docLoc.html in the same location as documentRemotePage.html.

    <html>

    <head>

    </head>

    <body>

    </body>

    </html>

  3. 3

    Edit docLoc.html and add an "onload()" event to the "<body>" tag. The onload() event sets the document's location to documentRemotePage.html when the page's "<body>" tag loads in a web browser. Save and close docLoc.html.

    <html>

    <head>

    </head>

    <body onload="document.location='documentRemotePage.html'">

    </body>

    </html>

  4. 4

    Open docLoc.html in a web browser. The onload() event will trigger when the page loads and documentRemotePage.html will open and display.

  1. 1

    Open a text editor and create a new file. Type some HTML code in the file that writes a message to the screen that explains that this is the page being called using JavaScript. Name the page newWindowRemotePage.html. Save and close newWindowRemotePage.html.

    <html>

    <head>

    </head>

    <body>

    <h1>This is a remote page opened in a new window using JavaScript.</h1>

    </body>

    </html>

  2. 2

    Reopen the text editor and create a new file. Type an "<html>" open tag and an "</html>" close tag, a "<head>" open tag and a "</head>" close tag, and a "<body>" open tag and a "</body>" close tag in the file. Place an open "<script type="text/javascript">" tag and a close "</script>" tag between the "<head>" and "</head>" tags. The "<script>" and "</script>" tags indicate where to place the JavaScript code. Save the file as "winOpenLoc.html" in the same location as newWindowRemotePage.html.

    <html>

    <head>

    <script type="text/javascript">

    </script>

    </head>

    <body>

    </body>

    </html>

  3. 3

    Edit winOpenLoc.html. Place a JavaScript function that opens the remote page between the "<script>" and "</script>" tags. This function, named "myNewWindow," opens the URL in a new window with specific attributes when called. Save winOpenLoc.html.

    <html>

    <head>

    <script type="text/javascript">

    function myNewWindow() {

    window.open('newWindowRemotePage.html','mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0');

    }

    </script>

    </head>

    <body>

    </body>

    </html>

  4. 4

    Continue editing winOpenLoc.html. Add a button between the "<body>" and "</body>" tags that uses the "on Click()" method to call the "myNewWindow()" function when clicked. Give the button the title "Click Me".

    <html>

    <head>

    <script type="text/javascript">

    function myNewWindow() {

    window.open('newWindowRemotePage.html','mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0');

    }

    </script>

    </head>

    <body>

    <button onclick="myNewWindow()">Click Me</button>

    </body>

    </html>

  5. 5

    Open winOpenLoc.html in a web browser. When the page loads, click on the button to trigger the "on Click()" event and call the "myNewWindow()" function. The file "newWindowRemotePage.html" will open and display with the specified window attributes.

Tips and warnings

  • JavaScript can be used to read and display the contents of remote files.
  • JavaScript can be used to open pages that are not in the same location as the calling page. To open pages on other hosts, use the absolute URL.
  • Consider using frames when displaying remote pages if it makes sense given the user interface.
  • Some users may choose to disable JavaScript in their web browser. Keep this in mind and message users appropriately if the user interface relies heavily on JavaScript.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.