17

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

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

#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>
4

8 に答える 8

4

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

（ごめん）

その理由は、クロス ドメイン ポリシー( more、infoiframe ) が原因で、子ドキュメントにアクセスできないため、それに応じheightてサイズを変更するためにそのドキュメントを確認するiframeだけです。

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

ソース

[...]

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

ソース

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

これをやりたい理由はデザイン関連のようです。そのため、サイト内にコンテンツ (iframe) を実装するさまざまな方法を検討する必要がある場合があります。高さの自然な制限はブラウザーのビューポートの高さであるため、おそらくビューポートのiframe100% (html、本文) ） 身長？ページに他のコンポーネントがある場合、これはデザインに干渉しますが、代替手段はあります...次のiframe可能性があります。

  1. 高さを 100% に設定してページの片側に揃える

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

  3. 親ウィンドウと一緒に伸縮するように制御 (JS) されます。bottom

また、これはこの種のコンテンツに対する世界的な制限であるため、ユーザーは完全に見慣れているわけではありません。したがって、理想的なデザインの選択ではありませんが、必ずしもサイトの訪問者を混乱させたり驚かせたりするものではありません.

于 2014-03-19T10:45:01.433 に答える
1

悪いニュースは、クロス ドメイン ポリシーでは、それができないことです。 私は回避しようとして数時間を費やしました。

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

最善の方法は、利用可能なライブラリを使用することです。

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

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

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

于 2014-03-25T12:09:20.957 に答える
0 
#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>
于 2014-03-18T13:53:40.530 に答える
0

ここでの最初の答えは私にとってうまくいきました！高さ 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>
于 2016-05-19T04:25:18.490 に答える
0

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();
        }
    }
    -->
于 2019-05-09T18:29:34.103 に答える