HTML Javascript コーディング 2022年6月14日

iframeの中でページ内リンク

こんばんは!

楽天RMSやyahooストアクリエイターproのカテゴリページや商品ページなどで、デザイン性の高い商品ページを作りたいけど、

使用できるタグや文字数が限られていて実現できないなー、ということがあるかと思います。

そんなときはiframeを使っていることが多いと思いますが、

iframeの中でページ内リンクを実装しようとしたときに本来のやり方のid指定による実装では少しばかり工夫が必要です。

 

yahooの場合こんなふうにiframeでyahooトリプルのページを呼び出し指定すると思いますが、


<iframe src="https://shopping.geocities.jp/xxx/xxx.html" width="100%" height="1000px" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>

 

ページ内リンクを実装している場合、scrolling=”no”を入れるとスクロールバーが表示されないため、

iframeのheightよりiframeの読み込みページのコンテンツが大きいと見切れてしまったり・・・

はたまた、iframeのheightがぴったりすぎると動かない。。。

iframeのheightを大きくしすぎるとiframeの下に余白ができちゃいますし(;´Д`)

そういう場合は、iframeにscrolling=”no”を指定せず、スクロールバーを表示するのが一番!


<iframe src="https://shopping.geocities.jp/xxx/xxx.html" width="100%" height="1000px" frameborder="0" marginheight="0" marginwidth="0"></iframe>

 

iframeのheight指定は、ページ内リンクが想定どおり動く高さがベスト。

ページ内リンクのとび先の位置が末尾に近すぎると(iframeのスクロールできる範囲ぎりぎりに近いとき)、スクロールできる位置に限界があるので限界が来たときにその先には動けません。
iframeの高さ調整をしつつ、合わせてくださいませ。
楽天RMSやyahooストアクリエイターproではJSが使えないのでこういう形にするしかないので難儀です。

楽天RMSやyahooストアクリエイターproでJSが使えれば・・・!と思うことはあるのですが

onload属性さえも挿入できなかった・・・長い運営の歴史を経てひたすら抜け道をふさがれているのでしょうね(;´Д`)

 

iframeタグを記述する親ファイルのドメインとiframeの呼び出し先になる子ファイルのドメインが違うと、ブラウザの仕様により両方のファイルでJSが使える環境でないと動きません・・・

同一オリジンポリシーというセキュリティ上の制約でJSが実行されません。

ドメインが違う場合も、iframeを記述している親ファイルとiframeの呼び出し先になる子ファイル両方にJSが使えれば、iframeのスクロールバーなしでも実装できるものが、楽天RMSやyahooストアクリエイターproなどのように制約があるシステムだとほんと惜しい(/ω\)

 

iframeタグを記述する親ファイルのドメインとiframeの呼び出し先になる子ファイルのドメインが同じであれば、どちらか片方(iframeを記述している親ファイルだけ、iframeの呼び出し先になる子ファイルだけ)にJSで実装できれば動きます。

iframeの中でのページ内リンクについて、今回は楽天RMSやyahooストアクリエイターproの場合について書きました。

ドメインが違う場合のiframeの中でのページ内リンクをJSで実装する方法、ドメインが同じ場合の方法についてはまた次の機会に書きたいと思います!