2014-12-01 2 views
1

article, 에 따르면 최신 버전의 Chrome (현재 HTML 가져 오기를 활성화하는 유일한 브라우저 일 수 있음) 이외의 브라우저에서 Polymer를 통한 HTML 가져 오기를 사용할 수 있습니다. 그러나 동일한 기사에서 적응 다음과 같은 HTML과 :Chrome에서 HTML 가져 오기가 작동하지 않음

1.html

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Basic HTML Imports</title> 
    <!-- Pull in our blog post example --> 
    <link rel="import" href="2.html"> 

    </head> 
<body> 
    <p>Hello World!</p> 
<script src="platform.js"></script> 
<script> 
     window.addEventListener('HTMLImportsLoaded', function() { 
     var link = document.querySelector('link[rel=import]'); 
     var content = link.import.querySelector('#test'); 
     document.body.appendChild(document.importNode(content, true)); 
     }); 
    </script> 
</body> 
</html> 

2.html

<div id="test"> 
    <h1>Here is the Import </h1> 
</div> 

나는 following result을 얻고있다.

<div id="test">은 Firefox에서는 가져 왔지만 Chrome에서는 가져 오지 못한 것으로 보입니다. about : flags에서 experimental Web Platform 기능을 사용하려고했습니다.

Chrome에서도 사용할 수있는 방법이 있습니까? Firefox와 Chrome의 최신 빌드를 사용하여 기본 가져 오기를 사용할 수있는 솔루션을 찾고 있습니다. (내 프로젝트는 2016 년 초까지 진행되지 않으므로 그때까지 모든 플랫폼에서 표준 지원이 제공되기를 기대하지만 해결 방법은 그만큼 좋습니다.) 감사합니다.

+0

이것은 그들이 여기에있는 방법입니다 : http://www.w3.org/TR/html-imports/#link-type-import – seraph

+0

흠, 내 의견을 말해 주셔서 대개 저는 이것을 PHP로 사용합니다 :) – zanderwar

답변

5

file: 프로토콜을 사용하고있는 것으로 보입니다. 이는 출생지 자원 공유 정책에 의해 차단되었습니다.

W3C spec on HTML Imports

: 마스터 문서 또는 잠재적으로 사용하여로드해야합니다 가져 오기지도에서 하나의 문서에서 링크

모든 수입을 "익명"으로 설정 모드를 가져 CORS가 가능.

localhost에서 서버를 실행하면 도움이됩니다.

+0

그냥 확인 - 실제로 온라인으로 작동합니다. 내가 사용한 것은 href = "2.html"이었습니다. 어떻게 로컬에서 작동하지 않습니까? 파일은 모두 같은 폴더에 있습니다. – seraph

+0

이 시점에서 Chrome은 Firefox와 다른 정책을 가지고 있습니다. 구체적인 이유는 모르지만 일반적으로 보안 문제입니다. 마찬가지로 서버가없는 경우 XMLHttpRequest를 통해 리소스를 요청할 수 없습니다. – Leo

+0

한 가지 더 명확한 설명 : 가져 오기를 Chrome에서 오프라인으로 올바르게 실행하려면 구문이 어떻게되어야하나요? 사실 href = "2.html"은 다른 페이지로 링크 할 때 잘 작동하지만 가져 오기 케이스에서 실패하는 것은 나에게 의미가 없습니다. – seraph

관련 문제