2016-02-26 50 views
0

我正在測試responsiveiframes.js以使iframe響應,iframe中的競賽沒有響應。如何使iframe響應responderiframes.js

我該如何讓它響應? 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> 
+0

在iframe上試試'height:auto'而不是'hieght:1000px;'。 – zer00ne

回答

0

我試圖讓responsiveiframes.js工作自己,但我放棄了,寫我自己的javascript插件(https://github.com/jcharlesworthuk/reactive.iframes,例如here)。

本質上,iframe中的內容本身不必響應,但它必須將其高度傳回給父級,以便可以設置高度樣式。如果您無法控制iframe中內容的高度,那麼真的沒有任何解決方案。

+0

感謝它的工作。 –