2016-03-31 18 views
0

this html5rocks post'dan ilham alarak, rel = "import" bağlantısını denemeyi düşündüm.Çalışmaya alınmaya çalışmak

yay! 
Loaded import: http://www.example.com/HelloWorld.htm 

Ama alamadım: Konsolda , ben olsun "Merhaba Dünya!" sayfada.

İşte benim kod:

<!DOCTYPE html> 
<html> 
<body> 
<script> 
function supportsImports() { 
    return 'import' in document.createElement('link'); 
} 

if (supportsImports()) { 
    console.log('yay!') 
} else { 
    console.log('boo!') 
} 
function handleLoad(e) { 
    console.log('Loaded import: ' + e.target.href); 
} 
function handleError(e) { 
    console.log('Error loading import: ' + e.target.href); 
} 
</script> 
<link rel="import" href="HelloWorld.htm" onload="handleLoad(event)" onerror="handleError(event)"> 
</body> 
</html> 

Ve HelloWorld.htm içerir:

<h1>Hello World!</h1> 

Düzenleme:

konsolunda

, bunu < h1 görebilirsiniz> Merhaba Dünya! </h1>, < html> < başlığındaki> </head> </body> ile birlikte başka bir #document olarak bağlantı etiketinin içinde yer alır.

+0

Dosya alındı. Bu, içeriğinin mevcut sayfaya döküleceği anlamına gelmez. Yeni başlayanlar için *, sayfada zaten içerik varsa, sayfada zaten bir miktar içerik olduğunu varsayarak ...? – deceze

+0

Sanırım ithalatın ne yapması gerektiğini anlamıyorum. Sadece basit bir içe aktarma veya ifade ifadesi yerine gölge dom ile bir ilgisinin olduğunu mu söylüyorsunuz? –

+0

AFAIK çoğunlukla WebComponents ile ilgilidir; bunun için muhtemelen başka kullanımlar var. – deceze

cevap

1

Aynı HTML5Rocks yayına göre, bir HTML kaynağını içe aktardığınızda, bir JavaScript nesnesi olarak erişilebilir. Özellikle, bir Document: HTML yüklemek için JavaScript kullanarak konusunda durakladı yazıda başlangıcı ile biraz ters, ama en azından daha az JavaScript (belki de sığabilecek tür kullanır gelmez

var myImport = document.querySelector('link[rel="import"]').import; 
document.querySelector(/* get the element we want here */).appendChild(myImport.body); 

Bir tarayıcı etiketi) ve kesinlikle AJAX'ın uğraşması gereken CORS kısıtlamalarına tabi değildir.

İlgili konular