我正在尝试制作一个具有IE和Opera兼容性的网站。
对于那些浏览器，不允许使用iframe。根据Opera Opera Wiki，
“ ... Opera浏览器和IE仅允许使用普通的HTML5和JS，因此此处不允许使用iFrame”
Style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
*{
font-family: sans-serif;
}
#header{
background: #711495;
background: -webkit-linear-gradient(bottom right, #711495, #D63A85);
background: -moz-linear-gradient(bottom right, #9336b7, #D63A85);
background: linear-gradient(to top left, #711495, #d33a84);
color:white;
padding-bottom:50px;
padding-top: 35px;
padding-left: 25px;
padding-right: 30px;
text-align: center;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 50%;
text-align: center;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
padding: 2px 16px;
}
/*Info Colors*/
.white{color: white;}
.green{color: #21d900;}
.red{color:#f02222;}
.blue{color: lightskyblue;}
.black{color:#797979;}
/*End*/
td{
width: 10%;
}
body {
margin: 0;
}
.parent {
display: table;
width: 100%;
height: 40px;
}
#left, #right {
display: table-cell;
vertical-align: top;
width: 45%;
height: 100%;
text-align: center;
border:solid;
border-color: rgba(0,0,0,0.2);
padding:10px;
border-width: thin;
}
.Bordermap{
border:solid;
border-width: thin;
border-color: rgba(0,0,0,0.2);
text-align: center;
}
.a{
background-color: #3695f4;
color: white;
padding:10px;
margin-bottom: 10px;
text-decoration: none;
margin-left:2.25px;
font-size: 20px;
}
.a:hover{
background-color: #f79800;
}
.rajscape{
background-color: none!important;
}
.hei{
background-size: 50%;
}
.oddaout{
background-color: none!important;
}
.nope_nothing_at_all{
color: white;
padding:10px 10px 10px 0px !important;
margin-bottom: 10px;
text-decoration: underline;
font-size: 15px !important;
}
.ok{
background-color: none!important;
}
#darK{
background-color: black!important;
}
.header-dark{
background-color:#393939;
color:white;
padding-bottom:50px;
padding-top: 35px;
padding-left: 25px;
padding-right: 30px;
}
.dark{
color: aliceblue;
background-color: #292929;
}
.full{
background-color: #3695f4;
color: white;
padding:10px;
margin-bottom: 10px;
text-decoration: none;
margin-left:2.25px;
font-size: 20px;
position: fixed;
z-index: 5;
}
.margin-left{
margin-left: 175px;
}
#top-link-area{
background-color: aliceblue;
z-index: 3;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The New COVID-19 Tracker</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script data-ad-client="ca-pub-4436265437354189" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<style>
#embeddev{
margin: 30px;
}
.qwerty {
font-family: 'Poppins', serif;
color:white;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
/*Stays in place */
background-color: #303630;
/*Grey*/
overflow-x: hidden;
color:white;
z-index: 12;
/*for Disabling horizontal scroll */
}
/* Position and style for the sidebar links */
.sidebar a {
padding: 10px 10px 10px;
font-size: 25px;
color: #ffffff;
display: block;
transition: 0.3s;
}
/* the links change color when mouse hovers upon them*/
.sidebar a:hover {
color: #ffffff;
}
/* Position and style the for cross button */
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
}
/* Style for the sidebar button */
.openbtn {
font-size: 25px;
background-color: #000000;
color: #ffffff;
padding: 10px 10px 10px;
border: none;
position: fixed;
z-index: 12;
}
/* the sidebar button changes
color when mouse hovers upon it */
.openbtn:hover {
color: #FFFFFF;
}
/* pushes the page content to the right
when you open the side navigation */
#main {
transition: margin-left .5s;
/* If you want a transition effect */
padding: 10px;
}
</style>
</head>
<body>
<div id="sidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">
×
</a>
<a href="spread.html">Stay Safe</a>
<a href="index.html">Home</a>
<a href="#map">Map Beta</a>
<a href="darkmode.html">Dark Mode Lite</a>
<a href="intern.html">NEW! Continents!</a>
<a href="#embeddev">Developer</a>
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">
Links
</button>
</div>
<script>
/* Sets the width of the sidebar
to 250 and the left margin of the
page content to 250 */
function openNav() {
document.getElementById(
"sidebar").style.width = "250px";
document.getElementById(
"main").style.marginLeft = "250px";
}
/* Set the width of the sidebar
to 0 and the left margin of the
page content to 0 */
function closeNav() {
document.getElementById(
"sidebar").style.width = "0";
document.getElementById(
"main").style.marginLeft = "0";
}
</script>
<div id="header">
<h1 class="qwerty">New Coronavirus Tracker</h1>
<h3 class="qwerty">This Is Where You Can Get All COVID -19 Info
</h3>
<h4>NEW USA Stats at bottom of this page!</h4>
<h3>SHARE THIS PAGE
<a href="linkshare.html" target="_blank" class="oddaout"><img src="https://image.flaticon.com/icons/png/512/2089/2089782.png" height = 30px></a></h3>
</div><br>
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-b64cfd63-38a6-4b27-8877-f176e60af02d"></div>
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-eb4a860e-edf5-45a1-9348-f7e008012ac6"></div>
</body>
<br>
<h1>NEW! USA stats</h1>
<iframe src="https://apps.elfsight.com/p/platform.js">
<iframe class="elfsight-app-badbbef6-f719-4652-8b9b-c87b9df7ec1d">
<br>
</html>有两种方法可以做到这一点。
第一种方法是添加AJAX jQuery广告并编写max兼容性声明$(IFRAME-ID).iframe.ms.enter[WEBSITE-URL]
。另一种方法是将该ID转到“ iFrame to JS”网站。互联网上有很多这样的网站。只需将JS代码放在头部即可。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句