How to load html into html?

4

4eloBek2015-09-17 01:13:45

JavaScript

4eloBek, 2015-09-17 01:13:45

I found an article on Habré What is HTML import and how does it work?
Everything works according to the examples:
intro.html

<div id="intro-dm">
  <h2>We're an awesome blog about web design</h2>
  <p>Designmodo is a great resource of informative material for designers and web developers. We are makers of highly-rated User Interface Packs, you can get acquainted with Designmodo shop here, and you can download a couple of other ui packs for free.</p>
</div>

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>What are HTML imports and how do they work</title>
    <link rel="import" href="/intro.html">
  </head>
  <body>
    <h1>Hello from Designmodo</h1>
  </body>
</html>

But trying to dynamically add my url to index.html

var link = document.querySelector('link[rel=import]');
link.setAttribute('href', 'intro.html');
var content = link.import.querySelector('#intro-dm');
document.body.appendChild(content.cloneNode(true));

Nothing comes out (
Help. How to solve this? ))

Reply

Answer the question

In order to leave comments, you need to log in

4 answer(s)

I

Ivan, 2015-09-17
@4eloBek

Sorry, what's a crutch? Why not standard AJAX?

Q

QQ, 2015-09-17
@botaniQQQ

Why are you trying to override href - link.setAttribute('href', 'intro.html');?

var link = document.querySelector('link[rel=import]');
      var content = link.import.querySelector('#intro-dm');
      document.body.appendChild(content.cloneNode(true));

E

Evgeniy _, 2015-09-17
@GeneD88

Not an expert, but why not embed the html in an iframe?
$("#iFrame").attr("src", "page.html")

V

V Sh., 2015-09-17
@JuniorNoobie

Create a DOMDocument.3.0 object. Upload your html file to it. Through innerHTML, insert the content of the object into any DOM element.