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

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

 if (document.documentElement.clientWidth > 600) { document.write("
Hello
"); }  

我认为这篇文章会对我有所帮助，但这有点过头了。

有没有人给我一些提示或一些阅读？

谢谢。

编辑：看看这个小提琴

也许我应该有一个永恒的.html文件并把它拉进……？

逃逸和东西存在问题 – 当嵌入代码中有大量疯狂的字符时……

Answer 1

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

jQuery的：

 $(function () { var width = $(window).width(); if (width <= 600) { $('
lesser than 600
').appendTo('body'); } else { $('
greater than 600
').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("
Hello
"); }