Search code examples
javascripthtmliframe

Load local html on iframe

I have in my server .html page located on c:\test\test.html.

I want to display test.html inside iframe on the client machine, how can I do that?

What I tried:

<iframe id="serviceFrameSend" src="file:///c:\test\test.html" width="1000" height="1000"  frameborder="0">

But it's found the test.html file on the client machine, so how can I make that the test.html will be loaded from the server?

If it isn't possible, how can I do that in another way?

Solution

  • As you have the page on your server you need to use an http:// url, not file:///. It's a little tricky because the web server has a different syntax for file paths than your file system. Here are some options.

    <iframe id="serviceFrameSend" src="test.html" width="1000" height="1000"  frameborder="0">
<iframe id="serviceFrameSend" src="./test.html" width="1000" height="1000"  frameborder="0">

    You can use these if test.html is in the same directory as your main-page. (The main-page is the html with the iframe in it.)

    <iframe id="serviceFrameSend" src="../test.html" width="1000" height="1000"  frameborder="0">

    You can use this if test.html is in the parent directory of your main-page, as long as it doesn't go beyond the web server's "root" directory.

    <iframe id="serviceFrameSend" src="../test/test.html" width="1000" height="1000"  frameborder="0">

    You can use this if the test.html is in the sibling directory of your main-page, such as path/views/test/test.html when your main-page is path/views/main/page.html.

    <iframe id="serviceFrameSend" src="https://www.server.com/test/test.html" width="1000" height="1000"  frameborder="0">

    Or, you can always use an absolute path, based on the complete url of your test.html.