日本語에서 번역 • 원문 보기 별로 없어요... 수요가 많지 않은 것 같지만, 전에 막혔던 iframe의 페이지 내 링크에 대해 써볼게요.
저는 iframe을 사용해 웹 서비스에서 별도로 생성된 HTML 콘텐츠를 표시했습니다. 그때 페이지 내 링크가 HTML 콘텐츠에서 작동하지 않는 문제를 겪었습니다.
iframe에 스크롤바가 있으면 일반적인 방식으로 페이지에 링크할 수 있지만, 스크롤바를 표시하면 단일 페이지처럼 보이기 때문에 표시할 수 없습니다. 또한 크로스 도메인의 경우, 객체가 부모와 자식 간에 조작될 수 없는 것 같습니다(XSRF를 방지하기 위해서).
많은 실험 끝에 자바스크립트 postMessage(자식 - html 콘텐츠)와 addEventListener(부모 - 원본 웹 서비스)를 조합해 구현할 수 있었습니다.
자식은 postMessage ↓ Scroll 주소를 통해 스크롤 목적지의 Y 좌표에 대해 부모가 addEventListener로 등록한 콜백 목적지로 스크롤을 알림합니다
kodomo.html (아이)
<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">페이지의 링크 1로</a><br />
<a class="PageNaiLink" href="#linl2">페이지의 링크 2로 가세요</a><br />
<a class="PageNaiLink" href="#link3">페이지 내 링크 3로</a><br />
<a class="PageNaiLink" href="#link4">페이지로 이동 링크 4</a><br />
<!-- ページ内リンク end -->
<div style="height:200px;"></div><!-- 余白 -->
<a id="link1"></a>링크 1 <div style="height:200px;"></div><!-- 余白 -->
<a id="link2"></a>링크 2 <div style="height:200px;"></div><!-- 余白 -->
<a id="link3"></a>링크 3 <div style="height:200px;"></div><!-- 余白 -->
<a id="link4"></a>링크 4 </body>
</html>```
oya.html (부모)
```<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>```