CODEWITHSUNDEEP
htmlcssiframe
Najwa K. Semdina
Najwa K. Semdina

Reputation: 71

Is is possible to embed a local html page inside another one?

If I have two html pages: index.html and embed.html. In embed.html, I have a random html page. However, I need to embed it inside index.html. I used this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div style="width:100%; padding-bottom:56.25%; position:relative; border: 2px solid black;">
        <iframe src="C:\\Users\\User\\OneDrive\\Desktop\\Web prog\\embed.html" style="position:absolute; top:0px; left:0px; 
        width:100%; height:100%; border: none; overflow: hidden;"></iframe>
      </div>
  </body>
</html>

In the src attribute, I put the path of the embed.html page.

When I run index.html. This is what I get in the dev tools:

index.html:12 Not allowed to load local resource: file:///C://Users//User//OneDrive//Desktop//Web%20prog//embed.html

Nothing appears in the index.html except the border I specified of the iframe tag

How can I make this work?

Upvotes: 2

Views: 2361

Answers (1)

BeanBoy
BeanBoy

Reputation: 855

If the html is in the same directory, use:

<iframe src="embed.html">

If the html is in a parent directory, use:

<iframe src="../embed.html">

Or if you want you can use the absolute path:

<iframe src="file:///c:\Users\User\OneDrive\Desktop\Web prog\embed.html">

Upvotes: 2

Related Questions