iframeで呼び出したサイトのページ内遷移が効かない

Question

iframeで呼び出したサイトのページ内遷移が効かない

WordPressの固定ページ内に、
iframeで別ページを埋め込み表示しているのですが、
ページ内遷移（アンカーリンクを用いたスクロール）が効きません。

・埋め込み元のページを直接開いた状態だと、ページ内遷移は行えます。
・iframeはJavascriptでページの高さを取得し、heightを設定しています。
・埋め込み元のページはjquery1.7.2とjquery.easing.jsを読み込んでおります。
・埋め込み元のページも編集可能です。

埋め込み元のページはscrolling="no"でスクロールバーを非表示にしており、
埋め込み先のスクロールバーのみを表示させております。
こちら、Javascriptの変更などでページ内遷移を可能にできますか？

ご存知の方がおられましたらご教授お願いします。
よろしくお願いいたします。

固定ページ内のソースコード

<div><iframe class="autoHeight" src="サイトURL" width="100%" frameborder="no" scrolling="no"></iframe></div>

埋め込みページ内のJavascript（スクロール箇所）

//
// スムーススクロール
//
// #で始まるアンカーをクリックした場合に処理
$("a[href^='#']").click(function(e) {
// 上部オフセット（この値分、本来の位置より下へずれる）
var gapTop = 0;

// スクロールの速度（ミリ秒）
var speed = 1000;

// アンカーの値取得
var href= $(this).attr("href");

// 移動先を取得
var target = $(href == "#" || href == "" ? 'html' : href);

// 移動先を数値で取得
var position = target.offset().top - gapTop;

// スムーススクロール
$('body,html').animate({scrollTop:position}, speed, 'easeOutQuart');

return false;

});

Comments

[yambejp]

iframeで呼び出しているsrcは自サイトとは全然別のサイトということでしょうか？

[murakami-nd]

こちら説明不足ですみません。
同じドメイン配下のページで、編集も可能です。

過去のキャンペーンページなのですが、アーカイブとして残しておきたく、
固定ページ内に埋め込む形をとっております。

[Lhankor_Mhy]

用語の確認ですが、
「固定ページ」＝「埋め込み元」
「呼び出したサイト」＝「埋め込みページ」
で、いいでしょうか？

そして、ページ内移動が上手くいかないのは、「呼び出したサイト」＝「埋め込みページ」の方、ということでいいですか？

[murakami-nd]

その認識で合っております！

[Lhankor_Mhy]

「埋め込み元のページはjquery1.7.2とjquery.easing.jsを読み込んでおります」とのことですが、「呼び出したサイト」＝「埋め込みページ」にもjquery1.7.2とjquery.easing.jsが読み込まれていると考えていいですか？

[murakami-nd]

呼び出したサイトには読み込まれていないです。jQueryはWordPress標準？の 3.5.1だったかと思います。

[murakami-nd]

iframeなので基本的には親ページのJSやCSSの影響は受けないのかな？と考えております。
一点補足ですが、heightをJSによる自動取得ではなく固定（例えば300px）にし、スクロールを有効にした場合は画面内遷移が有効になります。

[Lhankor_Mhy]

> 呼び出したサイトには読み込まれていないです。

それが原因のように思います。

Answer 1

呼び出したサイトには読み込まれていないです。

「呼び出したサイト」にも jquery.easing.js を読み込んでください。
iframe下のページは別のページですので、親ページで読み込んだライブラリの影響を受けません。