Question

我正在测试responsiveiframes.js以使iframe响应，iframe内的竞赛没有响应。

我如何让它响应？ iframe中的内容必须有响应吗？是否有其他选项可以使iframe响应（jquery或其他）？

非常感谢。

这是我的代码

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
    <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>ResponsiveIframes.js</title>

    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="http://npr.github.io/responsiveiframe/bootstrap/css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="http://npr.github.io/responsiveiframe/bootstrap/css/bootstrap-responsive.min.css" type="text/css" />

    <!-- Homepage CSS -->
    <link rel="stylesheet" href="css/index.css" type="text/css" media="screen, projection" />   
    <script src="http://npr.github.io/responsiveiframe/js/ios-orientationchange-fix.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>  
    <script type="text/javascript" src="http://npr.github.io/responsiveiframe/js/jquery.responsiveiframe.js"></script>
    </head>

    <body lang="en">

    <div class="hero-unit bg-noise">
            <h1>Responsive IFrames</h1>
    </div>

    <script type='text/javascript'>
            $(function () {
                $('iframe').responsiveIframe({xdomain: '*'});
            });
    </script><div class='row-fluid contentArea'>

        <div class='span8'>
        <div style='padding: 10px 0 10px 0; background-color: white;'>
            <iframe src='http://www.cuandoenelmundo.com/' style='width: 100%; height:1000px; padding: 0px;margin: 0; border: none; display: block; overflow: hidden;' />
        </div>
        </div>
    </div>  
    </body>
</html>

Answer 1

我试图让responsiveiframes.js自己工作，但我放弃并编写了自己的javascript插件（https://github.com/jcharlesworthuk/reactive.iframes，示例here）。

基本上，iframe中的内容本身不需要响应，但它必须将其高度传递回父级，以便可以设置高度样式。如果你无法控制iframe内容的高度，那么只有CSS的解决方案真的没有。

如何使用responsiveiframes.js使iframe响应

1 个答案: