0

I am searching for any html 5 tag that can be used to import a whole html document to my another document as I want to use it in my given JS code...

I already know about <embed>, <object> and tried them in the code but it seems that it can't use the sources of original document which I want to use...

The following is my JS function in which I plan to use html 5 tag...

function changeME(element) {
  document.querySelector(".changing_component").innerHTML = '<object type="text/html" data="./components/'+element+'.html" style=\"overflow:hidden; width: 99.25%; height: 101%\" width=\"100%\" height=\"101%\"" ></object>';
}

The expected output would be the working of the html document content with using the sources of the parent document.

j08691
  • 204,283
  • 31
  • 260
  • 272
Neo Anoman
  • 45
  • 5
  • "source of the original document" ? As in third-party or on the same domain/server? If it's external you should look up XSS (cross-site scripting) and CORS (Cross-Origin Resource Sharing). I think you're probably looking for `embed`. If not than you simply need to use `fetch` /`XHR` or `ActiveX` for older IE Browsers. – zfrisch Aug 19 '19 at 19:44
  • The only other tag I can think of is an iframe but I'm not sure it's what you need. – j08691 Aug 19 '19 at 19:46
  • I want to use all the things that are imported to parent document all css and jscript can iframe access all that and I don't have to import them again in the imported document by iframe.... sorry for being so confusing, I am really trying to be more expressive as ever here,,,@j08691 – Neo Anoman Aug 19 '19 at 20:44
  • right now it's in the same system in my own domain/pc and I know you might want to suggest I guess but I ran into a CORS problem when I used that as I am importing the file from my own system. @zfrisch – Neo Anoman Aug 19 '19 at 20:47

1 Answers1

1

Try the html5 <iframe> tag. With it, you can display the contents of another HTML file on your current file. 

<iframe src="/path_to_html_file" width="" height="" seamless></iframe>

The seamless attribute makes it scrollable

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <h3>This is my current html file.</h3>
  <iframe src="https://modtechy.com" seamless width="200px" height="300px"></iframe>
</body>

</html>
ceexon
  • 633
  • 5
  • 14
  • I want to use the styles and other things that are imported in the parent document and i don't think iframe can do this job. Please correct me if I am wrong. – Neo Anoman Aug 19 '19 at 20:41
  • Am quite sure the styles work well in the iframe as they do in the parent document. As for the javascript unless I test it then give you a response – ceexon Aug 19 '19 at 21:35
  • I think javascript also works since the above site in the iframe is some placeholder I have in my domain. The fireworks are all CSS and javascript. Let me add an image of the files structure and the code in the modtechy.com index.html. So yeah, styles and othe imported things work as if they are in the parent document. However I have not used an Iframe with a form which might be something worth trying out. Does this answer you question @NeoAnoman – ceexon Aug 19 '19 at 21:53
  • 1
    [check out this pen project to see if its what you expect](https://codepen.io/kburudi/project/editor/ZWROmo#0) – ceexon Aug 19 '19 at 22:44
  • What I want to do from the reference of your project is include scripts.js and index.css in index.html not in iframed.html and that shouldn't change the working of the project...that's what I am asking. @zonecc – Neo Anoman Aug 20 '19 at 10:56
  • I just updated the project and styles applied in index.html don't show in the iframed.html. If you get the iframe as a js variable and log it in your console while on index.html, it shows an embedded document. In this case, the iframe is not what you are looking for. I have nothing in mind that can do what you want. – ceexon Aug 20 '19 at 13:24
  • [someone asked a similar question a while back](https://stackoverflow.com/questions/6494721/override-body-style-for-content-in-an-iframe). This should answer you @NeoAnoman – ceexon Aug 20 '19 at 13:36