javascript - JS:在叠加层中打开随机视频、图像或链接
问题描述
我正在尝试使用 js 和 css 在叠加层中打开随机视频、图像或链接,但我无法使叠加层部分正确。
<a id="overlay" href="javascript:openSite()">Click to go to a random site</a>
<script>
var links = [
"google.com",
"youtube.com",
"stackoverflow.com",
"apple.com"]
var openSite = function() {
// get a random number between 0 and the number of links
var randIdx = Math.random() * links.length;
// round it, so it can be used as array index
randIdx = parseInt(randIdx, 10);
// construct the link to be opened
var link = 'http://' + links[randIdx];
var win = window.open(link, '_blank');
win.focus();
};
</script>
和CSS:
.overlay {
position: fixed; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
cursor: pointer; /* Add a pointer on hover */
}
这是一个jsfiddle
解决方案
猜猜你正在寻找这样的东西:
请注意,由于跨源安全策略,这在此代码段中不起作用!
var links = [
"google.com",
"youtube.com",
"stackoverflow.com",
"apple.com"
]
var openSite = function() {
var randIdx = Math.random() * links.length;
randIdx = parseInt(randIdx, 10);
var link = 'https://' + links[randIdx];
const iframe = document.createElement("iframe"); // create iframe
iframe.classList.add("overlay"); // add overlay class
document.body.append(iframe); // append to body
iframe.src = link; // set iframe url to your random choosen link
};
.overlay {
position: fixed; /* Sit on top of the page content */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
cursor: pointer; /* Add a pointer on hover */
}
<a href="javascript:openSite()">Click to go to a random site</a>
推荐阅读
- spring - 为什么即使配置了从不处理 JSON 的自定义转换器,Spring Boot 也会更改 JSON 响应的格式?
- java - 从 onClick 侦听器中调用方法
- node.js - 如何将nextjs部署到不是根目录的目录中
- r - 如何在 pivot_wider 中指定特定的列顺序
- jquery - 显示来自具有相同类名的多个 DIV 的第一个 div
- kubernetes - 在 Kubernetes pod 中找不到初始容器创建的文件和文件夹
- javascript - Mongodb根据少量条件为大量文档将字段从一个集合添加到另一个集合
- php - Laravel 扩展基本控制器并将其扩展为控制器的其余部分并在其中设置通用登录是一种好习惯吗?
- jsf - 仅在所有其他输入都有效时验证 ah:selectBooleanCheckbox
- gruntjs - grunt-babel 警告在严格模式下绑定“参数”