Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 946
CSharpBeginner Avatar asked Feb 22 '17 13:02

CSharpBeginner


3 Answers

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.

like image 100
DomeTune Avatar answered Oct 21 '22 23:10

DomeTune


You will have to place "test.html" file the public directory on the server. Or else make "test" directory publicly accessible.

like image 44
Tej Patil Avatar answered Oct 22 '22 00:10

Tej Patil


You will have to use server side language like PHP, ASP.NET, node.js etc and create a "proxy", that will get the desired file as parameter, read the file on the server, and send its contents.

For example, in ASP.NET you can have such code:

Download.aspx

<script language="C#" runat="server">
void Page_Load(object sender, EventArgs e)
{
    int id;
    if (!Int32.TryParse(Request.QueryString["id"], out id))
    {
        Label1.Text = "Missing or invalid ID";
        return;
    }

    string filePath = "";
    switch (id) {
        case 1:
            filePath = "c:\\test\\test.html";
            break;
    }

    if (filePath.Length == 0)
    {
        Label1.Text = "ID " + id + " does not exist";
        return;
    }

    if (!System.IO.File.Exists(filePath))
    {
        Label1.Text = "Requested file '" + filePath + "' does not exist";
        return;
    }

    System.IO.FileInfo fileInfo = new System.IO.FileInfo(filePath);
    Response.Clear();
    Response.WriteFile(fileInfo.FullName);
    Response.Flush();
    Response.End();
}
</script>
<!DOCTYPE html>
<html>
<body>
<form id="form1" runat="server">
    <asp:Label ID="Label1" runat="server"></asp:Label>
</form>
</body>
</html>

Then have such iframe:

<iframe id="serviceFrameSend" src="Download.aspx?id=1" width="1000" height="1000" frameborder="0"></iframe>
like image 1
Shadow Wizard Hates Omicron Avatar answered Oct 21 '22 23:10

Shadow Wizard Hates Omicron