如何根据浏览器窗口的宽度输出HTML?

时间:2014-07-21 15:06:21

标签: javascript jquery html

我制作了这个javascript并试过但从未奏效 它必须显示广告横幅 如果我把这个iframe放在javascript标签的外面,它工作正常,但我确实把javascript标签放在里面,因为iframe将根据浏览器窗口的宽度决定。

我怎样才能使这项工作?

<head>

<script type="text/javascript">
    width = jQuery(".pagenator").width();
    if (width > 730) {
        <iframe frameborder='0' allowtransparency='true' marginheight='0' marginwidth='0' scrolling='no' width='728' height='90' src='http://foofoofoofootest.com/adspot.aspx?id=21442?'>
        </iframe>
    } else if (width > 470) {
        <iframe frameborder='0' allowtransparency='true' marginheight='0' marginwidth='0' scrolling='no' width='468' height='60' src='http://foofoofoofootest.com/adspot.aspx?id=21443?'>
        </iframe>
    } else if (width > 255) {
        <iframe frameborder='0' allowtransparency='true' marginheight='0' marginwidth='0' scrolling='no' width='250' height='250' src='http://foofoofoofootest.com/adspot.aspx?id=21444?'>
        </iframe>
    } else {
        <iframe frameborder='0' allowtransparency='true' marginheight='0' marginwidth='0' scrolling='no' width='200' height='200' src='http://foofoofoofootest.com/adspot.aspx?id=21445?'>
        </iframe>
    }       
</script>   


<head>

<body>



</body>

</html>

更新

<body>

<script type="text/javascript">
    var TheHTML = "";
    width = jQuery(".pagenator").width();
    if (width > 730) {
        TheHTML = "<iframe frameborder='0' allowtransparency='true' marginheight='0' marginwidth='0' scrolling='no' width='728' height='90' src='http://foofoofoofootest.com/adspot.aspx?id=21442'></iframe>";
    } else if (width > 470) {
        TheHTML = "<iframe frameborder='0' allowtransparency='true' marginheight='0' marginwidth='0' scrolling='no' width='468' height='60' src='http://foofoofoofootest.com/adspot.aspx?id=21443'></iframe>";
    } else if (width > 255) {
        TheHTML = "<iframe frameborder='0' allowtransparency='true' marginheight='0' marginwidth='0' scrolling='no' width='250' height='250' src='http://foofoofoofootest.com/adspot.aspx?id=21444'></iframe>";
    } else {
        TheHTML = "<iframe frameborder='0' allowtransparency='true' marginheight='0' marginwidth='0' scrolling='no' width='200' height='200' src='http://foofoofoofootest.com/adspot.aspx?id=21445'></iframe>";
    }
    $("#frameHolder").html(TheHTML);        
</script>           


<div id="frameHolder"></div>


</body>

3 个答案:

答案 0 :(得分:3)

您需要将HTML添加到DOM;像这样:

var TheHTML = "";
var width = jQuery(".pagenator").width(); // add a var, otherwise you're creating a global
if (width > 730) {
     TheHTML = "<iframe frameborder='0' allowtransparency='true' marginheight='0' marginwidth='0' scrolling='no' width='728' height='90' src='http://foofoofoofootest.com/adspot.aspx?id=21442?'></iframe>";
} else if (width > 470) { ....

$('ContainerOfTheIframe').html(TheHTML);

这应该有效。还要确保脚本运行时有jQuery可用(即将jquery.js文件的引用放在脚本之上)。

答案 1 :(得分:1)

check out this fiddle

This should help you figure out what you need to do.

答案 2 :(得分:1)

试试这个

var pagewidth = jQuery(".pagenator").width(),
pageId = 0;
  if (pagewidth > 730) {
  pageId = 21442;
} 
else if (pagewidth > 470) {
  pageId = 21443;
}
else if (pagewidth > 255) {
  pageId = 21444;
}
else {
  pageId = 21445;
}    
$('body').html("<iframe frameborder='0' allowtransparency='true' marginheight='0' marginwidth='0' scrolling='no' width='728' height='90' src='http://foofoofoofootest.com/adspot.aspx?id='" + pageId + "'?'></iframe>");