如何在跨域中创建响应式iframe

How to create responsive iframe in cross domain?

本文关键字：创建 响应 iframe      更新时间：2024-06-27

我们已经开发了IFRAME，并将其提供给其他用户，问题是，一旦特定用户在网页中使用该IFRAME时，它就可以正常工作，但一旦切换到移动版本，IFRAME就会失去响应能力，变得更具体，IFRAME的内容仍然有响应能力，但IFRAME没有获得特定的自动高度。。。。。。？？？建议

<iframe src="http://rapidowebs.com/sctimer/my_timer.php?user_id=2"></iframe>ve

根据我的经验，要使iframe在每个平台上都能响应，您需要一些Css

首先将以下代码放在您的css文件中

.responsive_iframe {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; 
    height: 0; 
    overflow: hidden;
    display:block;
}
.responsive_iframe iframe, 
.responsive_iframe object,
.responsive_iframe embed {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 75%;
    height: 75%;
    max-width:90%;
    max-height:90%;
    margin: auto;
    margin-right: auto;
margin-left: auto;
margin-bottom:auto;
display:block;
}

然后你需要放一些看起来像的东西

<div class='responsive_iframe'><iframe allowtransparency='true' frameborder='0'   src='http://rapidowebs.com/sctimer/my_timer.php?user_id=2'></iframe> </div>

当然，这完全取决于你iframe的内容，无论你是计划放入一些对象还是嵌入或图像和文本。。。

您的问题有点不清楚。

所以我想你希望你的iframe是100%宽和100%高？如果这是你想要的，你必须相应地设置它的大小。否则它不知道你想要什么。

工作jsFiddle：http://jsfiddle.net/ra14bbcb/

相关文章：