In-page links in iframes (no scroll bar + cross-domain)

Translated from 日本語 • View original

Not really... I don't think there is much demand, but I'm going to write about the in-page link in the iframe that was stuck before.

I used an iframe to display HTML content created separately in a web service. At that time, there was a problem that the in-page link did not work in the html content.

If the iframe has a scrollbar, you can link to the page in the normal way, but you can't make the scrollbar appear because it looks like it's a single page. Also, in the case of cross-domain, it seems that the object cannot be manipulated between the parent and child (to prevent XSRF)

After a lot of experimentation, I was able to achieve it with a combination of javascript postMessage (child - html content) and addEventListener (parent - original web service).

The child notifies the parent of the Y coordinate of the scroll destination with a postMessage ↓ Scroll to the callback destination registered by the parent with addEventListener

kodomo.html (child)

    <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">To link 1 on the page</a><br />
        <a class="PageNaiLink" href="#linl2">Go to link 2 on the page</a><br />
        <a class="PageNaiLink" href="#link3">To link 3 on the page</a><br />
        <a class="PageNaiLink" href="#link4">To page link 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 (parent)

```<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>```

In-page links in iframes (no scroll bar + cross-domain)

See more

Related Articles