私のアプリケーションでは、ドロップダウンボックスから選択したドロップダウンボックスがあります。スクロールバーなしのコンテンツに応じてiframeの高さを増やす必要があるanybodはiframeのスクロールバーを使わずにURLコンテンツのiframeベースのサイズを変更する方法を教えてください。JavaScriptのiframeのスクロールバーを使わずにURLコンテンツのiframeベースのサイズを変更するには
3
A
答えて
0
iframeは自動的にターゲットコンテンツのサイズに収まることはありません。つまり、iframeの幅や高さに「自動」値がない場合は、フレームのサイズを指定する必要があります。
この問題を解決するには、選択したURLの横にiframeに渡すことができるように、コンテンツのサイズを事前に把握しておく必要があります。あなたはそれを行うためにデータ属性を使うことができます。ここ
HTML
<select id="frameURL">
<option value="http://www.url1.com/" data-cheight="600">URL 1</option>
<option value="http://www.url2.com/" data-cheight="750">URL 2</option>
<option value="http://www.url3.com/" data-cheight="1200">URL 3</option>
</select>
<iframe scrolling="no" style="display:none;" id="myFrame" src=""></iframe>
JS/jQueryの
$("#frameURL").change(function(){
// get URL
var target = $(this).find("option:selected").val();
// default fixed Width of content area
var cntWidth = 500;
// get content height from data-cheight
var cntHeight = $(this).find("option:selected").attr("data-cheight");
// pass all attributes to the iframe
$("#myFrame").attr({
src: target,
width: cntWidth,
height: cntHeight
});
// hide iframe when src attribute is empty/no URL chosen
!$("#myFrame").attr("src") ? $("#myFrame").hide() : $("#myFrame").show();
});
を参照してくださいワーキングモデル:https://jsfiddle.net/xxgs901u/3/
0
あなたが直接それからのiframeのコンテンツにアクセスすることはできませんが、親ウィンドウです。 iframeのソースがアプリケーションの内部ページである場合は、cross-document messagingでこれを実現できます。親で
$(document).ready(function() {
parent.postMessage({ height: $('html').height(), width: $('html').width() }, "*");
});
:iframe内
$(document).ready(function() {
// Create IE + others compatible event handler
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen to message from child window
eventer(messageEvent,function(e) {
$('iframe').width(e.data.width);
$('iframe').height(e.data.height);
},false);
});
必要な場合は、IFRAMEのコンテンツの変更の大きさならばより多くのイベントをリサイズ送信することができます。
関連する問題
- 1. IframeのサイズをIframeのsrc URLのIframeのコンテンツに応じて動的に変更します
- 2. コンテンツのiframeでFancyboxのサイズを自動的に変更する
- 3. サイズ変更のiFrame
- 4. iFrameの幅に合わせて外部ウェブサイトのコンテンツをサイズ変更
- 5. カラーボックスiframeのサイズを変更
- 6. 変更はiframeコンテンツ
- 7. https URLのhttpベースのIFRAMEを使用
- 8. ウィンドウのサイズを変更するiframeのサイズを変更する
- 9. iframeをリフレッシュせずにDivのコンテンツをjavascriptでラップする
- 10. クロスドメインURLでiframeのサイズを変更する方法
- 11. iframeのベースURLパスを設定する
- 12. ブラウザのiframeの高さのサイズを変更するには?
- 13. iframe-resizerはsrcdocでiframeのサイズを変更しませんhtml
- 14. Facebookのiframeアプリケーション用にサイズ変更可能なIframe
- 15. iframeのサイズを変更する - 外部のURLコードにアクセスする
- 16. Facebookのiframeアプリケーションウィンドウのサイズを変更するには
- 17. javascript iframeごとにサイズを変更する
- 18. Fancybox 2のiframeを動的にサイズ変更する方法は?
- 19. FirefoxでiFrameのサイズを動的に変更する方法は?
- 20. は、iframeのスクロールバーが
- 21. iframe内のsrcのサイズ変更onload src
- 22. iframeからの親URLを変更
- 23. IE 8以降ブラウザのiframeコンテンツのサイズを間違って変更する
- 24. iframeのsrcコンテンツを動的に変更する
- 25. 小さなコンテンツに合わせてfacebook iframeのサイズを変更しますか?私の研究から
- 26. iframeの自動サイズ変更を無効にする
- 27. IFRAME内の列サイズ変更(HTML)
- 28. jQueryでiframe URLを変更する
- 29. javascriptを使用してiFrame srcコンテンツを取得するには?
- 30. iframeのCSSにアクセスせずにiframeスクロールバーをスタイルすることはできますか?
index.jspで2つのドキュメント準備関数を使用しました。iframeを追加しました。 – user386430