Question

在我的脚本中，我试图让我的Javascript脚本返回一个URL，因此我可以使用该URL作为网站的背景。

这是我的代码：

//background script

//backgrounds
Rblxscreenshot_zombietower = "http://saberman888etai.net/background_images/rblxscreenshot.png";
Rblxscreenshot_zombietower2 = "http://saberman888.netai.net/background_images/zombietower2.png";
Rblxscreenshot_deathrun = "http://saberman888.netai.net/background_images/deathrun_ice.png";
Rblxscreenshot_deathrun2 = "http://saberman888.netai.net/background_images/deathrun_lobby.png";

SCREENSHOTS = [
Rblxscreenshot_zombietower,
Rblxscreenshot_zombietower2,
Rblxscreenshot_deathrun2,
Rblxscreenshot_deathrun
];

function returnBackground(){
    return SCREENSHOTS[Math.floor((Math.random() * SCREENSHOTS.length)+1)];
}

这是我的HTML代码：

<!DOCTYPE html>

<head>
    <title>Saberman888's Website</title>
    <link rel="stylesheet" type="text/css" href="theme.css"/>
    <script type="text/javascript" src="background.js"/>
</head>

<body style="background-image:url(<script src="http://saberman888.netai.com/background.js">returnBackground()</script>);">
        <div class="box">
            <div style="text-align:center;">
                <h1>Home</h1>
                <a href="index.html">Home</a>
                <a href="conlangs.html"> Conlangs</a>
                <a href="projects.html">Projects</a>
            </div>
            <hr>
            <div id="minibox" style="margin-left:100px;">
                <h2>Conlangs</h3>
                <ul>
                    <li>Florrum</li>
                    <li>Genie</li>
                </ul>
            </div>

            <div id="minibox" style="margin-left:100px;">
                <h2>Projects</h2>
                <ul>
                    <li>DLBOX</li>
                    <li>QuarryLang</li>
                </ul>
            </div>
            <div id="links">
                <a href="https://www.youtube.com/channel/UC5RPvaWrBVVXYbYTa4Yh4xA">My Youtube</a>
                <a href="">My DeviantArt</a>
                <a href="">My Twitter</a>
                <a href="8.42.96.39/User.aspx?ID=49027085
">My Roblox</a>
                <a href="https://github.com/saberman888">My Github</a>
            </div>
        </div>
</body>


</html>

正如您所看到的，在HTML代码中，它使用函数returnBackground()来获取用作背景的URL，但背景没有显示，有什么原因吗？

Answer 1

如果尝试使用数组的长度进行修改，它将始终在范围内。此问题看起来像下面一行中的超出范围错误：

function returnBackground(){
    return SCREENSHOTS[Math.floor((Math.random() * SCREENSHOTS.length)+1)];
}

所以用以下代替：

function returnBackground(){
    return SCREENSHOTS[Math.floor((Math.random() * SCREENSHOTS.length)+1) % SCREENSHOTS.length];
}

<强>更新

刚看到一个基本错误，您不能在属性中使用<script>标记或该实例的任何其他标记。这是一个语法错误：

<body style="background-image:url(<script src="http://saberman888.netai.com/background.js">returnBackground()</script>);">

您无法像这样设置背景网址。相反，你需要这样：

<body onload="returnBackground();">

在returnBackground()中应该以这种方式设置背景：

document.body.style.backgroundImage = url;

您的完整returnBackground()功能：

function returnBackground(){
    document.body.style.backgroundImage = SCREENSHOTS[Math.floor((Math.random() * SCREENSHOTS.length)) % SCREENSHOTS.length];
}

Answer 2

您尝试包含该脚本的方式不正确。

根据HTML5 specification，脚本标记必须在标记内包含 src属性或脚本内容，而不是两者。（指定src的脚本标记唯一允许的内容是文档，即注释。）

引用脚本元素：

如果存在src属性，则该元素必须为空或仅包含与脚本内容限制匹配的脚本文档。

（在HTML5之前，这也不正确，但是（我认为）它更不明确，所以它可能在某些浏览器中有用，但不要依赖于此。）< / em>的

此外，脚本标记不能在样式（或任何其他）属性中内联。

例如，您最好的选择之一是修改脚本以检索正文DOM元素并操纵其样式，特别是其背景图像（采取更加强制性的方法）。然后将此脚本包含在脚本标记中的HTML中。

Praveen Kumar关于添加onload事件处理程序的建议可能更容易，但无论您选择哪条路径，都必须修复脚本include。

为什么我的javascript没有返回网址？

2 个答案: