Tôi cố gắng để nhập khẩu một tài liệu HTML vào tài liệu chính của tôi sử dụngtài liệu Import HTML sử dụng HTML link rel
<link rel="import" href="my-tabs.html">
nhưng nó dường như không được làm việc.
tôi sau this presentation, sử dụng Chrome 28, và tôi đã kích hoạt hai lá cờ này trong about:flags:
Enable experimental WebKit features
Enable experimental JavaScript
Tôi có thiếu cái gì? hoặc có một lá cờ khác mà tôi cần để kích hoạt nó không?
Nhập khẩu HTML chỉ hoạt động nguyên bản trong Chrome Canary (và thậm chí ở đó chúng chỉ là half-baked). Đối với bài trình bày đó, Eric sử dụng một dự án có tên là Polymer, cung cấp một polyfill cho Nhập HTML (trong số những thứ khác). Kiểm tra nó ra!
Cập nhật: Triển khai một phần HTML hiện tại không có sẵn trong Chrome Canary. flag is set của nó chỉ để bật tính năng này cho các thử nghiệm (không phải bản dựng). Nó thậm chí không phải là một lựa chọn trong about:flags được nêu ra.
Cập nhật lại:Bây giờ có một lá cờ trong about:flags. Nó được gọi là Enable HTML Imports. Không chắc chắn chính xác khi nào nó đến. Tôi đã có nó trong Chrome 32.0.1671.3 dev trên Linux.
Tôi chỉ nghĩ rằng tôi muốn thêm này không được thực hiện trong Firefox hoặc, nó hiện đang được theo dõi tại https://bugzilla.mozilla.org/show_bug.cgi?id=877072
Trong ngắn hạn, bạn phải sử dụng polyfill polymer bao gồm hầu hết các trình duyệt:
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script>
<link rel="import" href="/static/troll.html"/>
</head>
Nhập khẩu HTML đã được đưa vào một số trình duyệt hiện đại. Vì vậy, nếu bạn muốn thực hiện công nghệ hiện đại thì bạn có thể làm điều đó với chỉ viết một số dòng mã:
<link rel="import" href="import.html" onload="handleLoad(event)" onerror="handleError(event)">
onload và onerror là để đăng nhập tình trạng của trang. (Nếu trang nhập đã được tải hay không.)
Tôi đã bao gồm trang nhập của mình (import.html) vào <template> thẻ để sao chép nó trong Biến Javascript.
import.html:
<template>
<h1>Hi there!</h1>
<h2>To use html-imports..</h2>
<h3>In Chrome 35 and below(in which you found the flag) you've to enable the flag: <span style="color: brown;">chrome://flags/#enable-html-imports</span></h3>
<h3>In Chrome 36 and Opera 23, it's supported by default. </h3>
</template>
Bạn đã sử dụng Javascript để sử dụng trang nhập khẩu
// Thanks to http://www.html5rocks.com/en/tutorials/webcomponents/imports/
var link = document.querySelector('link[rel="import"]');
// Clone the <template> in the import.
var template = link.import.querySelector('template');
var clone = document.importNode(template.content, true);
document.querySelector('#getting-started-info').appendChild(clone);
function handleLoad(e) {
console.log('Loaded import: ' + e.target.href);
}
function handleError(e) {
console.log('Error loading import: ' + e.target.href);
}
Biến link được sử dụng để có được các yếu tố nhập khẩu.
Biến số template được sử dụng để lấy số <template> từ số import.html.
Biến số clone được sử dụng để lấy nội dung của số <template> trong import.html.
Sau đó, tôi cố gắng thêm nội dung vào ID của <div>.
handleLoad và handleError được sử dụng để thông báo trạng thái của trang nhập thông qua bảng điều khiển sẽ được hiển thị trong nhiều trình duyệt 'DevTools'.
Tôi đã viết một article here.
Và Tạo một kho lưu trữ trong Github tại github.com/krman009/html-imports.
html5rocks article.
Tôi ước điều này sẽ giúp bạn.
Hãy tóm tắt nội dung được liên kết trong câu trả lời của bạn để nó vẫn hữu ích nếu nội dung được liên kết thay đổi hoặc trở nên không thể truy cập được. – skrrgwasme
Xin lỗi, nhưng tôi không thể nhận được nó – Kaushalya
Điều gì làm bạn có nghĩa là bạn không thể có được nó? Bạn mở các liên kết của bạn, viết một bản tóm tắt nhỏ hoặc trích dẫn các bit quan trọng và đưa thông tin đó vào câu trả lời của bạn. Từ trung tâm trợ giúp: "Luôn trích dẫn phần có liên quan nhất của một liên kết quan trọng, trong trường hợp trang web mục tiêu không thể truy cập được hoặc vĩnh viễn ngoại tuyến". * Câu trả lời của bạn cần phải vẫn là một câu trả lời hữu ích nếu tất cả các liên kết của bạn bị xóa * – skrrgwasme
Vẫn không được hỗ trợ trên iOS và Android, vẫn không có trên Firefox (tính đến tháng 10 -15).
Có thể bạn cần một máy chủ http. http://stackoverflow.com/a/27222358/1941881 –