logo标签列表

如何使用JavaScript调整iframe大小以适应URL内容，并在iframe中去除滚动条。

javascriptangularjsiframe
3

在我的应用程序中，有一个下拉选择框包含URL，当用户从下拉列表中选择URL时，我需要在iframe中加载URL和内容大小。我需要根据内容增加iframe的高度，而不需要滚动条。有谁能告诉我如何在iframe中根据URL内容调整大小，以便没有滚动条？

2个回答
0

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

要解决这个问题，您需要事先知道内容的大小，以便在选择的URL旁边将其传递给iframe。您可以使用data-attributes来实现这一点。

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的内容。如果iframes的源是应用程序的内部页面，则可以使用跨文档消息传递来实现此目的。

在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内容的大小发生更改，您可以发送更多的调整大小事件。

你在index.jsp中使用了两个document ready函数，我已经添加了iframe。 - user386430
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接