Import no html
Fala pessoal, está agora na fase de working draft o html import, mas agora com a versão atual do Chrome e do Opera já é possível utilizar este recurso, podendo ser conferido no site caniuse. Isso ajuda muito o conceito de Web Components que está começando a ser produzindo atualmente, com esse novo recurso, podemos fragmentar o código e reaproveita-lo novamente em outras páginas.
Então vamos ai o exemplo, primeiro criamos o index.html
Depois o javascript:
E por ultimo a criação da nossa página header.html, que futuramente poderá ser utilizada em outras páginas.
Desta forma conseguimos adicionar o conteúdo do header.html na index, mas isso pode ser utilizado em conjunto com as tag "style" e "script", podendo também fazer o estilo na própria página de cada parte assim como o seu javascript, fazendo com isso criar realmente componentes.
É isso ai, qualquer dúvida só deixar nos comentários, e como sempre tem um exemplo completo la no GitHub.
Abração a todos e até mais ;)
Então vamos ai o exemplo, primeiro criamos o index.html
<!DOCTYPE HTML>
<html lang='pt-br'>
<head>
<title>André Betiolo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<link rel="import" href="views/header.html">
</head>
<body>
<section class="main"></section>
<script type="text/javascript" src="js/app.js" ></script>
</body>
</html>
Depois o javascript:
window.onload = function(){
var link = document.querySelector('link[href="views/header.html"]');
var header = link.import.querySelector('header');
var content = document.querySelector('.main');
content.appendChild(header);
};
E por ultimo a criação da nossa página header.html, que futuramente poderá ser utilizada em outras páginas.
<header>Header importado</header>
Desta forma conseguimos adicionar o conteúdo do header.html na index, mas isso pode ser utilizado em conjunto com as tag "style" e "script", podendo também fazer o estilo na própria página de cada parte assim como o seu javascript, fazendo com isso criar realmente componentes.
É isso ai, qualquer dúvida só deixar nos comentários, e como sempre tem um exemplo completo la no GitHub.
Abração a todos e até mais ;)
Comentários
Postar um comentário