根據視口寬度更改iframe源

我試圖讓iframe在視口寬度更改時使用jQuery將其源代碼從文檔的完整版本更改爲移動版本。這裏是我當前的代碼：根據視口寬度更改iframe源

<head> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      // on full-sized viewports 
      if((document).width >= 1000) { 
       // this line should change the src attribute 
       $("#myIframe").attr('src', 'http://www.fullsize.url'); 

       // this just resizes the iframe 
       $("#myIframe").width = 1000; 
       $("#myIframe").height = 1200; 
      } 

      // on mobile viewports 
      else { 
       $("#myIframe").attr('src', 'http://www.mobilesize.url'); 
       $("#myIframe").width = 640; 
       $("#myIframe").height = 800; 
      } 
     }); 
    </script> 
</head> 
<body> 
    <iframe id="myIframe" src="http://www.fullsize.url"> 
</body>

我遇到的問題是，新的src，width和height屬性不實際更新 - 我不知道爲什麼。

是甚至有可能使用jQuery，考慮到這將需要加載一個新的iframe？我是否需要使用Ajax來避免重新加載頁面？

來源

2013-12-22 Jules

使用$("#myIframe").width(value)和$("#myIframe").height(value)

編輯：和替換(document).width與$(window).width()

來源

2013-12-22 19:22:39

好吧，這部分解決了這個問題，所以拜 - 可是'src'？ – Jules

文檔準備就緒後，您的功能將被執行一次。如果你想通過調整窗口大小來更新'src'，你應該處理'resize'事件 –

根據視口寬度更改iframe源

回答

相關問題