Question

我当前在我的网站上有一个页面，访问该页面时，它会将您转发到我网站上的随机页面。现在，如果用户正在移动设备上查看列表，我会尝试缩小该列表。我很难弄清楚这一点。现在，我在脚本部分中做了两个不同的onLoad函数，并且媒体查询根据屏幕大小删除了加载它的html。

<html>
<head>
<script type="text/javascript">
<!--
// Create an array of the links to choose from:
var links = new Array();
links[0] = "spinguy.html";
links[1] = "hardware.html";
links[2] = "flappymatt.html";
links[3] = "spinzone.html";
links[4] = "shlink.html";
links[5] = "goop.html";
links[6] = "spinzone.html";
links[7] = "index1.html";
links[8] = "ghoul.html";
links[9] = "grandma.html";
function openLink() {
  // Chooses a random link:
  var i = Math.floor(Math.random() * links.length);
  // Directs the browser to the chosen target:
  parent.location = links[i];
  return false;
}

<!--
// Create an array of the links to choose from:
var links = new Array();
links[0] = "spinguy.html";
links[1] = "hardware.html";
links[2] = "flappymatt.html";
links[3] = "shlink.html";
links[4] = "ghoul.html";
links[5] = "grandma.html";
function openPhoneLink() {
  // Chooses a random link:
  var i = Math.floor(Math.random() * links.length);
  // Directs the browser to the chosen target:
  parent.location = links[i];
  return false;
}
//-->
</script>

<style>

.phone{
        display: none;
    }
  @media only screen and (max-width: 800px) {
    .computer{
        display: none;
    }
    .phone{
        display: inline;
    }
}
  @media only screen and (max-width: 400px) {
    .computer{
        display: none;
    }
.phone{
        display: inline;
    }
}
</style>

</head>
<body>
<div class="computer" onload="openLink();"></div>
<div class="phone" onload="openPhoneLink();"></div>
</body>
</html>

Answer 1

几件事。

div没有onload事件-该荣誉是为body保留的。因此，我将您的onload调用移到了body标签。 <body onload="openLink()">。签出this。
display: none;不会阻止元素加载，只会阻止元素显示在页面上。
您甚至不需要为此使用div。如果您查看我如何重写您要执行的操作，您会看到页面上没有任何div。我只需调用函数onload并替换openLink()函数中的位置即可。
使用window.location.href更改页面的URL。 StackOverflow question。
您不需要在JavaScript函数结尾处return false。它们在结束时仅返回程序流程。（但是，如果您确实从期望返回值但没有返回值的东西中调用它们，则会得到undefined。）

我没有根据大小更新openLink()来从其他数组中进行选择，但是您应该使用let windowWidth = window.innerHeight;之类的东西，并根据情况使用if语句值。另外，看看some better ways在JavaScript中使用和填充数组。

<head>
    <script type="text/javascript">

        //get size of window using window.innerWidth and make the link array according to the value
        // Create an array of the links to choose from:
        function openLink() {
            var links = new Array();
            links[0] = "spinguy.html";
            links[1] = "hardware.html";
            links[2] = "flappymatt.html";
            links[3] = "spinzone.html";
            links[4] = "shlink.html";
            links[5] = "goop.html";
            links[6] = "spinzone.html";
            links[7] = "index1.html";
            links[8] = "ghoul.html";
            links[9] = "grandma.html";
            // Chooses a random link:
            var i = Math.floor(Math.random() * links.length);
            // Directs the browser to the chosen target:
            window.location.href = links[i];
        }

    </script>

</head>

<body onload="openLink()"></body>

</html>

Answer 2

首先，您的onload属性将无效，因为它只是HTML元素子集上的有效属性，即：

<body>，<iframe>，<img>，<input>，<link>，<script>，<style>

这是因为这些元素具有某种与之关联的异步加载。检查此w3schools.com页以供参考。

根据您的描述，我假设您打算在onload上发生这些<body>事件，因为它具有“在网页完全加载所有内容后执行脚本”的独特行为。

这没关系，因为您不需要为openLink()和openPhoneLink()分离函数，并且为了简单起见，可以将它们折叠为一个函数。

您可以避免@media CSS查询的麻烦，因为Javascript仍然可以确定视口的宽度和高度。

window.screen.width-设备宽度
window.screen.height-设备高度

如果您想真正了解尺寸和设备规则，可以找到this one之类的引用，详细了解Javascript中不同尺寸变量的含义。

现在，回到当前的问题...

您可以使用Chrome开发者工具等工具并在移动设备之间切换并刷新浏览器来测试设备切换。在这种情况下，我的800像素检查不足以知道iPad不是计算机，但是您可以在此处输入所需的任何规则。

我已竭尽全力为您的链接提供更可重用的数据结构。希望这对您有所帮助：

<html>
<head>
<script type="text/javascript">

const Device = {
  COMPUTER: "computer",
  PHONE: "phone"
}

const links = [
  { href: "spinguy.html", computer: true, phone: true, },
  { href: "hardware.html", computer: true, phone: true, },
  { href: "flappymatt.html", computer: true, phone: true, },
  { href: "spinzone.html", computer: true, phone: false, },
  { href: "shlink.html", computer: true, phone: true, },
  { href: "goop.html", computer: true, phone: false, },
  { href: "index1.html", computer: true, phone: false, },
  { href: "ghoul.html", computer: true, phone: true, },
  { href: "grandma.html", computer: true, phone: true, },
]

const randomIndex = (length) => {
  return Math.floor(Math.random() * length)
}

const device = () => {
  // modify as needed to distinguish devices you care about
  return window.screen.width >= 800 ? Device.COMPUTER : Device.PHONE
}

const openRandomLink = () => {
  const deviceKey = device()
  // console.log("deviceKey", deviceKey)
  const validLinks = links.filter(link => link[deviceKey])
  const randomLinkIndex = randomIndex(validLinks.length)
  const randomLink = validLinks[randomLinkIndex].href
  // console.log("randomLink", randomLink)
  window.location.href = randomLink
}

</script>

</head>
<body onload="openRandomLink()">
</body>
</html>

发送到不同的随机网站站点（如果是移动设备）

2 个答案: