我想加载 map ,但只有当我可以假设它们在 wifi 上时我才想加载它。由于没有真正的方法可以做到这一点,我将假设如果窗口宽度大于 600,那么它们就是。加载 iframe 有点棘手 - 但只要加载一个图像就可以让我开始。这是可行的,但如果我把一堆复杂的 html 塞进去,它似乎不起作用。无论如何,我不太确定是否应该在 html 中间放置脚本。
<script>
if (document.documentElement.clientWidth > 600) {
document.write("<h1>Hello</h1>");
}
</script>
我想这个THIS ARTICLE会帮助我,但这有点超出我的能力范围。
有人可以给我一些建议或读物吗?
谢谢。
编辑:查看this fiddle
也许我应该有一个永久的 .html 文件并将其拉入...?
存在转义等问题 - 当嵌入代码等中有大量疯狂字符时......
最佳答案
你永远不应该使用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
关于jquery - 根据窗口大小有条件地加载一些 html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15726399/