0

我想要做的是在足够大的屏幕上显示全屏背景图像，它适用于大多数浏览器，但它会导致其他浏览器出现问题。我通过 W3 Validator 运行它，它说 XHTML 不支持 document.write 中的 Div 和 Img 标签。在没有 document.write 的情况下，我该如何编写代码以便它通过验证器并且不会在某些浏览器上导致错误？

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.fullscreenBackground.js"></script>
<script type="text/javascript">
$(document).ready(function () {
        $("#background-image").fullscreenBackground();
    });
</script>

            <script type="text/javascript">
var viewPortWidth = $(window).width();
var viewPortHeight = $(window).height();
if (viewPortHeight >= 300 && viewPortWidth >= 400) {
document.write("<div id='background-image'><img src='BGLarge.gif' alt='background' width='1920' height='1080' ></div>");
}
else {
document.write("");
}
</script>
4

3 回答 3

2

使用 jquery 预先添加您的元素：http ://api.jquery.com/prepend/ 。

这应该有效。或者你可以改变你的文档类型。

于 2012-12-01T00:30:42.457 回答
2 
if (viewPortHeight >= 300 && viewPortWidth >= 400) {
  $('body').prepend('<div id="background-image"><img src="http://thetylerpress.com/new/BGLarge.gif" alt="background" width="1920" height="1080" ></div>');
}

您将不需要 else 语句

于 2012-12-01T00:37:09.433 回答
1

了解哪个浏览器引发错误会很有用。无论如何，为什么不使用 jQuery 来实现你想要的呢？

$('body').prepend(
    $('<div></div>')
        .attr('id', 'background-image')
        .html("<img src='http://thetylerpress.com/new/BGLarge.gif' alt='background' width='1920' height='1080' >")
);​

现场示例：http: //jsfiddle.net/Wyd43/

于 2012-12-01T00:37:49.127 回答