刷新方向變化的iframe的內容

好的，所以我建立了這個html模板，它允許我們在ipad上顯示動畫html廣告。本質上它使用媒體查詢來確定設備的寬度，然後（使用css）顯示「肖像」或「風景」div。縱向和橫向div都包含包含各自方向廣告的iframe。刷新方向變化的iframe的內容

我遇到的問題是，出於某種原因，使用Adobe Edge製作的廣告在設備的方向發生更改時不會重新生成。我希望能夠實現的目標是在設備的方向發生變化時強制整個html頁面或iframe的內容進行刷新，從而重新塑造廣告。

我的代碼如下：

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1" /> 
<link href="http://www.calgaryheralddigital.com/creative/ads/general/reset.css" rel="stylesheet" type="text/css" media="screen"> 
<link href="http://www.calgaryheralddigital.com/creative/ads/general/clickTags.css" rel="stylesheet" type="text/css" media="screen"> 

<!-- orientation handler --> 
<style type="text/css" media="all and (min-width: 1px) and (max-width: 800px)"> 
    #portrait{ display:block; } 
    #landscape{ display:none; } 
</style> 
<style type="text/css" media="all and (min-width: 800px) and (max-width: 1500px)"> 
    #portrait{ display:none; } 
    #landscape{ display:block; } 
</style> 
</head> 

<body> 
<div id="landscape"> 
    <div style="z-index:1; position:relative;"> 
     <iframe src="http://www.calgaryheralddigital.com/creative/ads/client/filename.html" width="1024px" height="90px" frameborder="0"> 
     <p>Your browser does not support iframes.</p> 
     </iframe> 
    </div> 
    <div id="bannerLand"> 
     <a href="%cINSERT URL HERE"> 
      <img src="http://www.calgaryheralddigital.com/creative/ads/general/trans.gif" width="1024" height="90"/> 
     </a> 
    </div> 
</div> 
<div id="portrait"> 
    <div style="z-index:1; position:relative;"> 
     <iframe src="http://www.calgaryheralddigital.com/creative/ads/client/filename.html" width="768px" height="90px" frameborder="0"> 
     <p>Your browser does not support iframes.</p> 
     </iframe> 
    </div> 
    <div id="bannerPort"> 
     <a href="%cINSERT URL HERE"> 
      <img src="http://www.calgaryheralddigital.com/creative/ads/general/trans.gif" width="768" height="90"/> 
     </a> 
    </div> 
</div> 
</body> 

</html>

預先感謝您的幫助！

來源

2012-05-29 astro shark

我居然能使用一些代碼，我從另一個堆棧溢出問題拉到解決我自己這個問題： What is the best method of re-rendering a web page on orientation change?

var supportsOrientationChange = "onorientationchange" in window, 
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize"; 

window.addEventListener(orientationEvent, function() { 
    window.location.reload() 
}, false);

來源

2012-07-03 15:09:11

刷新方向變化的iframe的內容

回答

相關問題