你能使iFrame响应吗?

Question

我想在另一个网站的WordPress页面中嵌入一个网站。

iframed 网站是 ASP 中的联系表单处理页面，它没有响应。

我可以将其包装在响应式的div 标签中，或者我可以使 iFrame 响应吗？

谢谢。

Answer 1

取决于你希望 iframe 响应什么：包含块的更改或 iframe 内内容的更改。

如果您希望 iframe 适应包含块的大小（例如，用户调整浏览器窗口的大小），您可能希望使用百分比值向 iframe 元素添加相对尺寸，例如，通过样式表：

html,body {
    height:100%;
}
iframe {
  width:80%;
  height:80%;
}

为此，您还需要将 html 和正文设置为 100% 高度，不要问我为什么：-）但这种魔力就是有效的。

示例：http://jsfiddle.net/4z2hn/

我想补充一下我个人的观点：最好不要使用 JavaScript 来解决布局问题。为此，请改用 CSS。当前CSS实现的强大功能允许风格上的灵活性，并提供以前不可用的设计可能性。仅当所有其他方法都失败时，才求助于脚本化解决方案。

Answer 2

不确定联系表单 asp 页面上有哪些元素。

您可以尝试通过jquery调整大小的方法。从 当您使浏览器变小时，如何创建自动调整 iframe 大小？

$(window).resize(function() {
  $('IFRAME').width($(window).width());
});

或者使用其他方法。

调整

窗口大小时调整 iframe 的宽度

$(function() {
   var newwidth = $(window).width() - 250;
   $('iframe').css({width: newwidth+'px'});
});
$(window).resize(function() {
   var newwidth = $(window).width() - 250;
   $('iframe').css({width: newwidth+'px'});
});

这取决于框架内的内容，调整大小实际上对您有多好。 但这是一个开始。

Answer 3

调整大小并保持原始比例。

1. 使用原始高度和宽度计算比例
2. 获取新宽度（即使用 css 的 % 大小）
3. 派生新的高度

X/新宽度 = 原点

高度/原点宽度
X = 新宽度 * （原点高度/原点宽度 ）
X = 新高度

看这里：https://jsfiddle.net/koaab543/2/

function responseveIframe() {
  $('iframe').height(
    $('iframe').attr("height") / $('iframe').attr("width") * $('iframe').width()
  );
}
responseveIframe();
$(window).resize(function() {
  responseveIframe();
});

iframe {
  max-width: 98%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe width="854" height="480" src="https://www.youtube.com/embed/C0DPdy98e4c"></iframe>

Answer 4

如果 iframe 内容不是您的页面，则无法使其响应。您可以添加 iframe 样式

iframe {
  width: 100%;
}

以使 iframe 包装器响应。但是其中的内容 - 将与以前相同 - （正如我所说 - 除非它也是您的页面）