HTMLオブジェクト要素とスクロールバーの問題

Question

私は私のサイトに外部のURLからHTMLを埋め込むために、次のHTMLを使用していますし、それは素晴らしい作品：ページで

<object data="https://myapp.com/explore" width="100%" height="100%" type="text/html" style="overflow: hidden;"> 
    <embed src="https://myapp.com/explore" width="100%" height="100%;" /> 
    Error: Embedded data could not be displayed. 
</object> 

、垂直スクロールバーがある、示されていますコンテンツがChromeブラウザウィンドウの高さよりも大きいため、私が期待する正しい動作。

最初に垂直スクロールバーをクリックすると、ページがスクロールします。その後、クリックせずに、マウスが垂直スクロールバーの上にくるたびにページがスクロールされます。

誰もがこれを見て、あなたは解決する方法を提案できますか？それは...私が前に見たことがない奇妙な行動だ

Answer 1

...ピクセルでmax-heightプロパティを使用してみてください、とスクロールするoverflowプロパティを使用し

object_classname{ 
    max-height: 600px; //as you like 
    overflow-y: scroll; 
} 

Answer 2

私はあなたのオブジェクト+埋め込みアプローチを試してみました、スクロールバーで同じ問題が発生しました。 Chromeブラウザはスクロールバーのmousedownをトリガーしないようですが、mouseupが発生します。これはバグのようです。なぜiframeを試してみませんか？あなたが期待するとして、それは私が考える、働く：

<iframe id="exploreIFrame" src="http://myapp.com/explore" 
    width="100%" height="100%" style="border: none;" 
></iframe> 

それはウィンドウ全体にまたがるようにするには、これらのスタイルを設定します。

<style type="text/css"> 
    body { margin: 0; } 
    #exploreIFrame { position: fixed; } 
</style> 

Answer 3

代わりに埋め込みのIFRAMEを使用する方が良いでしょう。

IFRAME：

iframe要素は、ネストされたブラウジング・コンテキストを表します。 HTML 5標準では、主に他のドメインやサブドメインのリソースを含めるために使用される「要素」について説明していますが、同じドメインのコンテンツも含めることができます。 iframeの強みは、埋め込まれたコードが「生きている」ことであり、親ドキュメントと通信できることです。

埋め込み：HTML 5で標準化さ

、しかしその前に、それは確かに、すべての主要なブラウザで実装された非標準のタグでした。 HTML5より前の動作はさまざまです...

embed要素は、外部（通常HTML以外の）アプリケーションまたは対話型コンテンツの統合ポイントを提供します。 HTML 5標準では、ブラウザプラグインのコンテンツを埋め込むための「要素」について説明しています。これに対する例外はSVGとHTMLであり、これらは標準に従って処理が異なります。

埋め込みコンテンツでできることとできないことの詳細は、問題のブラウザプラグインに依存します。しかし、SVGのために、あなたのようなもので、親から埋め込まれたSVGドキュメントにアクセスすることができます。組み込みのために

parent = window.parent.document; 

：埋め込まれたSVGやHTMLドキュメント内側から

svg = document.getElementById("parent_id").getSVGDocument(); 

、あなたが親に達することができますHTMLでは、（私が見つけた）親から埋め込みドキュメントを取得する方法はありません。