10

を使用して HTML ドキュメントをメイン ドキュメントにインポートしようとしています。

<link rel="import" href="my-tabs.html">

しかし、それは機能していないようです。

Chrome 28 を使用してこのプレゼンテーションをフォローしています。次の 2 つのフラグを で有効にしましたabout:flags。

Enable experimental WebKit features
Enable experimental JavaScript

何か不足していますか？または、それを取得するために有効にする必要がある別のフラグがありますか?

4

6 に答える 6

8

HTML インポートは、Chrome Canary でネイティブにのみ機能します (そして、そこでさえ中途半端な状態です)。そのプレゼンテーションのために、Eric はPolymerと呼ばれるプロジェクトを使用します。このプロジェクトは、特に HTML インポート用のポリフィルを提供します。見てみな！

更新: HTML インポートの現在の部分的な実装は、Chrome Canary でも利用できません。そのフラグは、テスト (ビルドではなく) に対してのみオンにするように設定されています。それはまだオプションではabout:flagsありません。

再度更新: にフラグが追加されましたabout:flags。と呼ばれていEnable HTML Importsます。それがいつ起こったのか正確にはわかりません。LinuxのChrome 32.0.1671.3 devで取得しました。

于 2013-07-12T20:57:39.137 に答える
1

これは Firefox でも実装されていないことを付け加えたいと思いました。現在、 https://bugzilla.mozilla.org/show_bug.cgi?id=877072で追跡されています。

短期的には、ほとんどのブラウザーをカバーするポリマー ポリフィルを使用する必要があります。

<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script>
    <link rel="import" href="/static/troll.html"/>
</head>
于 2014-07-02T06:12:26.520 に答える
1

iOS と Android ではまだサポートされておらず、Firefox ではまだサポートされていません (10 月 15 日現在)。

于 2015-10-18T08:34:17.300 に答える
-2

HTML インポートは、一部の最新ブラウザーに搭載されています。したがって、最新のテクノロジーを実装したい場合は、数行のコードを書くだけで実装できます。

<link rel="import" href="import.html" onload="handleLoad(event)" onerror="handleError(event)">

onloadonerrorページのステータスを記録するためのものです。(インポート ページがロードされているかどうか。)インポート ページ ( ) をタグに
ラップして、Javascript 変数に複製しました。import.html<template>

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>

インポートしたページを使用するには Javascript を使用する必要があります

// 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);
}

linkインポート要素を取得するために変数が使用されます。
変数templateは から を取得するために使用され<template>ますimport.html。
変数は、 incloneの内容を取得するために使用されます。 次に、コンテンツを a の ID に追加しようとします。また、多くのブラウザで表示されるはずのコンソールを介してインポート ページのステータスを通知するために使用されます。ここに記事 を書きました。 そして、github.com/krman009/html-imports で Github にリポジトリを作成しました。html5rocks 記事. これがお役に立てば幸いです。<template>import.html
<div>
handleLoadhandleErrorDevTools



于 2014-10-01T15:23:05.677 に答える