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

Question

我想加载 map ，但只有当我可以假设它们在 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()，这不是一个好的做法。相反，您可以使用 javascript 的 .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 媒体查询:

您也可以使用 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