如何使用响应式iframes使iframe响应.js

How to make an iframe responsive with responsiveiframes.js

本文关键字：响应 iframe js 何使用 iframes      更新时间：2023-09-26

我正在测试响应式iframes.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>

我试图让响应式框架.js自己工作，但我放弃了并编写了自己的JavaScript插件（https://github.com/jcharlesworthuk/reactive.iframes，这里的例子）。

从本质上讲，iframe 内的内容本身不必响应，但它必须将其高度传达回父级，以便可以设置高度样式。 如果您无法控制 iframe 内内容的高度，那么仅使用 CSS 真的没有任何解决方案。

相关文章：