問題タブ [html-imports]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
6 に答える
16637 参照

javascript - HTML リンク rel を使用して HTML ドキュメントをインポートする

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

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

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

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

0 投票する
2 に答える
1172 参照

css - HTML インポート経由で読み込まれた CSS のレンダリング ブロックを防ぐにはどうすればよいですか?

Web ComponentsPolymerを使用して Web サイトを作成し、HTML Imports経由でアセットをロードしています。

私のマークアップは次のようになります。

assets.htmlレンダーブロッキングを回避する方法で CSS を明示的にロードします。

ただし、Google のPageSpeed Insightsでサイトを実行すると、次のエラーが表示されます。

スクロールせずに見えるコンテンツでレンダリングをブロックする JavaScript と CSS を排除する

あなたのページには 2 つのブロッキング CSS リソースがあります。これにより、ページのレンダリングが遅れます。

次のリソースが読み込まれるのを待たずに、ページのスクロールせずに見えるコンテンツをレンダリングすることはできませんでした。ブロッキング リソースを遅延または非同期でロードするか、これらのリソースの重要な部分を直接 HTML にインライン化してください。

次の CSS 配信を最適化します。

http://is-aws-assets.divshot.io/main.min.css

http://fonts.googleapis.com/ …y=Source+Sans+Pro:200,300,400,600,700,90

私が混乱しているのは、Google 自身の公式のOptimize CSS Deliveryガイドで、HTML インポートはレンダリング ブロックなしで CSS をロードする必要があると明確に述べていることです。

Web プラットフォームは、HTML インポートを使用して、JavaScript を使用する必要なく、レンダリングをブロックしない方法でスタイルシートの読み込みをすぐにサポートすることに注意してください。

私は何か間違ったことをしていますか?これは PageSpeed Insights のバグですか?

0 投票する
1 に答える
246 参照

javascript - HTML5 インポート機能がすべてのブラウザーで機能しない

再利用できるように、共通の HTML ファイルを他のファイルにインポートする必要がありました。私はこの記事に従いましたが、このコンセプトは Chrome でまったく問題なく機能します。しかし、Firefox と IE では動作しないようです。後で、現在 Chrome (V.36.0 以降) のみがそれをサポートしていることがわかりました。

ブラウザー間で機能を動作させるための回避策はありますか? どんな助けでも大歓迎です。

ありがとう。

0 投票する
1 に答える
4167 参照

firefox - firefox ReferenceErrorのPolymer 1.0:Polymerが定義されていません

こんにちは、Chrome と Opera で Polymer 1.0 の Web ページを作成しています。次に、このページを Firefox と Safari で実行する必要があります。次のテストがあります。

変えてみました

また

webcomponents の Polyfills が html のインポートを処理すると思いました。しかし、それは機能していません。firefox では、次のエラーが表示されます。

Safari でテストすることはできませんでしたが、同様の結果が期待できます。

私は何か間違ったことをしていますか?どうすればこれを機能させることができますか?

また、webcomponents を削除し、bower update を実行して再度インストールしてみました。

ありがとうございました

編集:

私は2つのファイルを持っています。index.html:

および要素ファイル:

これはうまくいきます。私の問題は、addEventListener を削除した場合です。Firefox でも同じエラーが発生します。

ポリフィルが時間内にロードされなかったかのように。これを修正する方法はありますか?addEventListener を追加するのは正しい方法ですか?

ありがとうございました

0 投票する
1 に答える
443 参照

javascript - ポリマーを使用して他のブラウザで HTML インポートを有効にする方法は?

タイトルとして、サイトで HTML インポート リンクを使用しました。

バリアンス「リンク」は、Chrome ではドキュメントを返しますが、Safari やその他のブラウザーでは null を返します。HTML インポート機能は今のところ Chrome でしかサポートされていないことがわかっているので、インポート リンクの前に次のコードを追加して、Polymer の webcomponents.js をロードします。

しかし、他のブラウザではまだ null を返します。修正方法を教えてもらえますか?