●前提・実現したいこと
楽天Goldというサーバー環境でカテゴリー別に商品ページを表示したいと考えています。
残念ながら楽天Gold内部で最新のカテゴリーを自動取得することができない仕様でしたので有償の外部ツールを利用して取得したページを iframeタグ を使用してページに埋め込むことにしました。
しかし残念なことに、取得した iframe のコンテンツに含まれる CSS で高さが固定されていて下記のようになっています。
<style> iframe { width: 100%; height: 400px; /* 固定された高さ */ } </style>
複数ある iframe 内のコンテンツの長さがそれぞれ異なるため、今後の新たな商品の追加や更新等を考えると jQuery で iframe 内のコンテンツの高さを取得して適切な高さで表示したいと思います。
◆実現したいこと(最終的にこのようになれば解決できそうです)
<iframe src="vem02.html" scrolling="no" frameborder="0" style="height: 1032px !important;"></iframe> <iframe src="vem03.html" scrolling="no" frameborder="0" style="height: 887px !important;"></iframe> <iframe src="vem04.html" scrolling="no" frameborder="0" style="height: 1440px !important;"></iframe> <iframe src="vem05.html" scrolling="no" frameborder="0" style="height: 1143px !important;"></iframe>
取得した高さの末尾に !important を追加し強制適用したいと考えています。
上記のように実現するには 下記の jQuery でどのように処理したら良いでしょうか?
下記は現状の動作内容になります。
★ソースコード(実行前)
<html> <head> . . . <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <iframe src="vem01.html" scrolling="no" frameborder="0"></iframe> <iframe src="vem02.html" scrolling="no" frameborder="0"></iframe> <iframe src="vem03.html" scrolling="no" frameborder="0"></iframe> <iframe src="vem04.html" scrolling="no" frameborder="0"></iframe> <iframe src="vem05.html" scrolling="no" frameborder="0"></iframe> <script> $("iframe").on("load", function(){ try { $(this).height(0); $(this).height(this.contentWindow.document.documentElement.scrollHeight); var imp = $(this).attr("style"); $(this).css({"cssText" : imp + "!important"}); } catch (e) { } }); $("iframe").trigger("load"); </script> </body> </html>
★ソースコード(実行後)
<html> <head> . . . <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <iframe src="vem01.html" scrolling="no" frameborder="0" style="height: 1521px;"></iframe> <iframe src="vem02.html" scrolling="no" frameborder="0" style="height: 1032px;"></iframe> <iframe src="vem03.html" scrolling="no" frameborder="0" style="height: 887px;"></iframe> <iframe src="vem04.html" scrolling="no" frameborder="0" style="height: 1440px;"></iframe> <iframe src="vem05.html" scrolling="no" frameborder="0" style="height: 1143px;"></iframe> <script> $("iframe").on("load", function(){ try { $(this).height(0); $(this).height(this.contentWindow.document.documentElement.scrollHeight); var imp = $(this).attr("style"); $(this).css({"cssText" : imp + "!important"}); } catch (e) { } }); $("iframe").trigger("load"); </script> </body> </html>
●実行環境
- OS: Windows10 64bit
- ブラウザ: Google Chrome 72.0.3626.109(64bit)
- ライブラリのバージョン: jquery-3.3.1.min.js
何卒ご教示のほど宜しくお願いします。
回答1件
あなたの回答
tips
プレビュー