Question

在我的应用程序中，选择下拉框包含url，而用户从下拉列表中选择url。我需要在内容大小的iframe中加载url。我需要根据内容增加iframe的高度而不用滚动条可以任意告诉如何根据网址内容调整iframe大小而不使用iframe中的滚动条？

Answer 1

iframe无法自动适应其目标内容的大小。换句话说：没有＆＃34; auto＆＃34;取值为iframe的宽度或高度，您必须指定框架的大小。

要解决此问题，您必须事先了解内容的大小，以便将其与所选网址一起传递给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/

Answer 2

您无法从其父窗口直接访问iframe的内容。如果iframe的来源是您应用程序的内部页面，则可以使用cross-document messaging实现此目的。

在iframe中：

$(document).ready(function() {
    parent.postMessage({ height: $('html').height(), width: $('html').width() }, "*");
});

在父母：

$(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内容的大小发生变化，如果需要，您可以发送更多调整大小事件。

如何在java脚本中的iframe中没有滚动条的情况下根据网址内容调整iframe大小

2 个答案: