你能让 iFrame 响应吗？

Question

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

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

我可以将它包装在一个响应式的 div 标签中，或者我可以让 iFrame 响应吗？

谢谢。

Answer 1

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

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

html,body {
    height:100%;
}

iframe {
  width:80%;
  height:80%;
}

为此，您还需要将html和body设置为 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'});
});

这取决于框架内的内容，调整大小对您的实际效果如何。但这是一个开始。