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调整大小的方法。来自How do you create auto resizing a iframe when you make your browser smaller?

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

或使用其他方法。

Resizing an iframe's width on window resize

$(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

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

使用原始高度和宽度计算比例
获取新的宽度（即使用css的％尺寸）
获得新的高度

X / newWidth = originHeight / originWidth
X = newWidth *（originHeight / originWidth）
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样式

iframe {
  width: 100%;
}

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

你能让iFrame响应吗？

4 个答案: