Links de página em iframes (sem barra de rolagem + entre domínios)

Traduzido do 日本語 • Ver original

Não muito... Não acho que haja muita demanda, mas vou escrever sobre o link da página no iframe que estava entupido antes.

Usei um iframe para exibir conteúdo HTML criado separadamente em um serviço web. Naquela época, encontrei o problema de que o link dentro da página não funcionava no conteúdo html.

Se o iframe tiver uma barra de rolagem, você pode linkar para a página da forma normal, mas não pode exibir a barra de rolagem porque isso faz parecer que é uma única página. Além disso, no caso de domínio cruzado, parece que o objeto não pode ser manipulado entre pais e filhos (para evitar XSRF).

Depois de muitos experimentos, consegui isso com uma combinação de javascript postMessage (filho - conteúdo html) e addEventListener (pai - serviço web original).

O filho notifica o pai da coordenada Y do destino do scroll com um postMessage ↓ Role até o destino de retorno de chamada registrado pelo pai com addEventListener

kodomo.html (criança)

    <head>
        <script type="text/javascript">
        $(document).ready(function(){
            // 親フレームにスクロール(=ページ内リンク)する命令を送る
            $(".PageNaiLink").click(function(){
                var parentFrame = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
                var target = $(this).attr("href");
                if(typeof parentFrame != "undefined"){
                    
                    // 【メインの処理】
                    // messageイベントで処理を識別する文字列(この場合は'page_nai_link')と飛び先のy座標を送る
                    // ※この場合、リンク元のタグのhref属性は'#リンク先'のみ
                    parentFrame.postMessage( "page_nai_link" + $(target).offset().top, "*");
                    
                }else{
                    // エラー処理
                }
            });
        });
        </script>
    </head>
    <body>
        <!-- ページ内リンク -->
        <a class="PageNaiLink" href="#link1">Para o link 1 na página</a><br />
        <a class="PageNaiLink" href="#linl2">Vá para o link 2 na página</a><br />
        <a class="PageNaiLink" href="#link3">Para o link 3 na página</a><br />
        <a class="PageNaiLink" href="#link4">Para o link da página 4</a><br />
        <!-- ページ内リンク end -->

        <div style="height:200px;"></div><!-- 余白 -->

        <a id="link1"></a>Link 1        <div style="height:200px;"></div><!-- 余白 -->

        <a id="link2"></a>Link 2        <div style="height:200px;"></div><!-- 余白 -->

        <a id="link3"></a>Link 3        <div style="height:200px;"></div><!-- 余白 -->

        <a id="link4"></a>Link 4    </body>
</html>```

 

oya.html (pai)

```<html>
    <head>
        <script type="text/javascript">
        // messageイベントのコールバック関数を登録します。
        window.addEventListener("message", receiveSize, false);

        function receiveSize(e) {
            
            // 【メインの処理】
            // messageイベントは一つしか無いので、複数の処理で使いまわすことになります。
            // そのため、kodomo.htmlから送信する文字列内に処理内容を識別できる文字列(この場合は'page_nai_link')を
            // 付けています
            if( typeof e.data == "string" && 0 == e.data.indexOf("page_nai_link") ){
                var scrollVal = parseInt(e.data.replace('page_nai_link', ''));
                $('html,body').scrollTop(scrollVal);
            }
        }
        </script>
    </head>
    <body>
        <!-- 別途作成したコンテンツを表示(スクロールバー無し・異なるドメイン) -->
        <iframe  src="http://betsu.domain.com/kodomo.html" id="" height="950" style="border:0" />


    
    </body>
</html>```

Links de página em iframes (sem barra de rolagem + entre domínios)

Veja mais

Related Articles