web-dev-qa-db-ja.com

埋め込まれた/公開されたGoogleドキュメントを含むIframeの自動高さ

Googleドキュメントを公開したiframeを持っています。そのドキュメントの内容は変更される可能性があるため、その内容に基づいてiframeの高さを自動調整したいと思います。私はこれに対するいくつかの解決策を見つけましたが、それらはすべて子ドキュメントのヘッドへのアクセスを必要とします。誰もがこれを行う方法についてのアイデアを持っていますか？

以下で使用するコードの抜粋を表示できます。

#faq{
height: 800px;
overflow: hidden;
position: relative;
width: 660px;
border-top: 1px solid #90C547;
border-bottom: 1px solid #90C547;
}

<div id="faq"><iframe id="faqif" src="https://docs.google.com/document/..../pub?embedded=true" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:900px;width:832px;position:absolute;top:-92px;left:-150px;right:0px;bottom:0px;z-index:0;" height="900px" width="832px"></iframe></div>
htmlcssiframegoogle-docsgoogle-drive-realtime-api
15
celalalt

現在これを行う方法はありません。

ただし、高さを大幅に大きくして境界線を非表示にすると、iframeスクロールバーが表示されなくなり、ドキュメントがWebサイトの一部であるように見えます。

5
Radius Kuntoro

簡単な答え...あなたはできません

（ごめんなさい）

理由は クロスドメインポリシー （ more 、 info ）によるものであり、iframe子ドキュメントにアクセスできないため、確認できますheightのサイズを変更するために、そのiframeを使用するには、単に

コンピューティングでは、同一起源ポリシーは、Webアプリケーションセキュリティモデルの重要な概念です。このポリシーでは、同じサイト（スキーム、ホスト名、およびポート番号の組み合わせ）から発信されたページで実行されるスクリプトが、特定の制限なしに互いのDOMにアクセスすることを許可しますが、異なるサイトのDOMにはアクセスできません。

ソース

[...]

フレーム化されたサイトを制御できない場合、クロスドメインポリシーを回避することはできません。

ソース

また、これを行うことができない場合は、子ドキュメントの高さを確認する方法がないため、必要な操作を行うことができません。

これを行う理由は、デザインに関連しているようです。したがって、サイト内にコンテンツ（iframe）を実装するさまざまな方法を検討することをお勧めします。高さの自然な制限はブラウザーのビューポートの高さであるため、iframeを100％ビューポート（html、ボディ）の高さ？ページ上に他のコンポーネントがある場合、これはデザインに干渉しますが、代わりの方法があります... iframeは次のことができます：

  1. 高さを100％に設定して、ページの片側に揃えます

  2. 高さ/幅が100％のポップアップウィンドウまたはモーダルウィンドウ内に配置する

  3. おそらく固定されたbottomで、親ウィンドウでストレッチするように制御されます（JS）

また、これはこの種のコンテンツに対するグローバルな制限であるため、ユーザーがそのコンテンツを見ることに完全に慣れていないわけではないので、理想的なデザインの選択ではありませんが、サイトへの訪問者を混乱/驚かせるものではありません。

4
SW4

悪い知らせは、クロスドメインポリシーでは、それをどのようにしても許可しないことです。私は、次のような回避策を試みるために数時間を費やしました。

  • 親DIVを作成し、それにiframeを合わせる
  • 親DIVを動的にサイズ変更しようとしています
  • サーバー側の高さを計算するライブラリを見つけようとしています
  • そしてグーグルの多く。

最良のアプローチは、利用可能なライブラリを使用することです。

次のURLからZipをダウンロードし、そこに書かれている簡単なインストール手順に従ってください。

http://davidjbradshaw.github.io/iframe-resizer/

有望に見えますが、自分でテストすることはできません。それを見て、助けが必要な場合はコメントを投稿してください。

1
Nj Subedi

コンテンツはiframe内にありますが、非常に困難です（不可能ではありませんが、実際的ではありません）。

ただし、GoogleドキュメントのCORSポリシーにより、SOの過去のどこかで見つけたこのコードスニペットを使用できます（コードのコメントに保存しましたが、申し訳ありませんが、コンテンツを抽出してiframeの外で使用する、つまり、リクエストを作成する方法としてのみ「iframe」を使用し、コンテンツ自体をフォーマットする。属性を指定してから、コンテンツの高さを処理できます。他と同じように結果のdiv。

    <!--
      // get all iframes that were parsed before this tag
    var iframes = document.getElementsByTagName("iframe");

    for (let i = 0; i < iframes.length; i++) {
        var url = iframes[i].getAttribute("src");
        if (url.startsWith("https://docs.google.com/document/d/")) {
            // create div and replace iframe
            let d = document.createElement('div');
            d.classList.add("embedded-doc"); // optional
            iframes[i].parentElement.replaceChild(d, iframes[i]);

            // CORS request
            var xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.onload = function() {
                // display response
                d.innerHTML = xhr.responseText;
            };
            xhr.send();
        }
    }
    -->
0
Kyle Baker

私は同じ問題を抱えていました。ここに解決策があります本体を100％100％widht高さに設定する必要があります次に、iframe表示ブロック、100％幅100％vhこれが最終的なコードです。

`body style =" margin：0px; padding：0px; width：100％; height：100％; " div style = "height：100％; width：100％; display：block;" iframe frameborder = "0" style = "height：100vh; width：100％; display：block;" width = "100％" height = "100％" src = "https://docs.google.com/spreadsheets/d/1SizkrPE97j1TouBmohPjCj0ZB-MxYQtRSKotHyxT8Y8/edit#gid=0"/iframe div

0
Fernando
#faq{
position: relative;
width: 832px;
border-top: 1px solid #90C547;
border-bottom: 1px solid #90C547;
height: 100%
}
#faqif{}
.bgcolor_patch{position: absolute; right: 0; top:0; height: 100%; width: 20px; background: #fff; }

 $(document).ready(function(){
    $("iframe").load( function () {
        var c = (this.contentWindow || this.contentDocument);
        if (c.document) d = c.document;
        var ih = $(d).outerHeight();
        var iw = $(d).outerWidth();
        $(this).css({
            height: ih,
            width: iw
        });
    });
});

<div id="faq"><iframe id="faqif" src="https://docs.google.com/document/..../pub?embedded=true" height="100%" width="832px" frameborder="0"></iframe>
<div class="bgcolor_patch"></div>
</div>
0
Akshay Mohite

ここでの最初の答えは私のために働いた！ 100％の高さのフルスクリーンiframe

    <body style="margin:0px;padding:0px;overflow:hidden">
      <iframe src="http://www.youraddress.com" frameborder="0"
        style="overflow:hidden;height:100%;width:100%" height="100%"
        width="100%">                       
      </iframe>
    </body>
0
Stedman Blake

同様のものがここで尋ねられました： Googleドキュメントを埋め込むためにドキュメントの全長を表示

解決策は、<embed> の代わりに <iframe>またはCORSリクエストを介してGETでドキュメントを作成し、好きな場所に配置します。後者では、コンテンツのスタイル/変更も可能です。

0
Alkis