根据窗口大小有条件地加载一些html

Question

我想加载地图，但我只想加载它，如果我可以假设它们在wifi上。由于没有真正的方法可以做到这一点，我将假设如果窗口宽度大于600，那就是它们。加载iframe有点棘手 - 但加载图片会让我开始。这有效，但如果我在那里推出一堆复杂的HTML，它似乎不起作用。我不太确定我的html中间应该有脚本。

<script>
  if (document.documentElement.clientWidth > 600) {
    document.write("<h1>Hello</h1>");
  }
</script>

我认为THIS ARTICLE会帮助我，但这有点过头了。

有人为我提供一些提示或阅读吗？

感谢。

编辑：查看this fiddle

也许我应该有一个永恒的.html文件并将其拉入......？

当嵌入代码中存在大量疯狂字符时，存在转义和填充问题......

Answer 1

你永远不应该使用document.write()使用它不是一个好习惯。相反，您可以使用jQuery的.innerHTML或jQuery的.html()。 jQuery还有其他几种方法来完成这类工作，例如.append()，.appendTo()类似.prepend()，.prependTo()：

jQuery的：

$(function () {
   var width = $(window).width();
   if (width <= 600) {
      $('<p>lesser than 600</p>').appendTo('body');
   } else {
      $('<p>greater than 600</p>').appendTo('body');
   }
});

DEMO FIDDLE

CSS MEDIA QUERIES：

您也可以通过css媒体查询实现此类事情：

span {
   color:green;
   font-weight:bold;
}
.div600 {
   display:none
}
.divOther {
   display:block
}
@media all and (max-width:600px) { /****<-----This media query******/
   .div600 {
       display:block
   }
   .divOther {
       display:none
   }
}    

DEMO FIDDLE CSS MEDIA QUERY

Answer 2

你想要这样的东西......

 var width =  $(window).width(); //retrieve current window width

  if(width > 600){
      $("#articleID").html(Your_Html_Section_Which_you_want_to_put_in_article);
      //document.write("<h1>Hello</h1>");
  }