I am trying to make the icons work so that when I click on them, they open an iframe that contains the page that I want to go to so that the actual URL never changes, but the user can still access the subpages of the website. I set the “onclick=beep()” to the page I wanted it to appear as, but I instead just sends me to the website’s main page. I will include screenshots to show what I mean. The iframe also only takes up the very top of the page, instead of taking up the whole page.
Website Before
Website After
What did I do wrong?
function beep(x) {
var iframe = document.createElement("iframe")
var html = "<body>Foo</body>"
document.getElementById('all').hidden = true
iframe.src = x + encodeURI(html)
document.body.appendChild(iframe)
} body {
background: radial-gradient(circle at bottom, #4D511F 0, #03260c 100%);}
h1{
margin:auto;
text-align: center;
font-weight: 400;
font-style: normal;
font-size: 5vw;
color: #D0BF94;
}
.grid {
display: grid;
grid-template-columns: auto auto auto auto;
margin-top: 5%;
margin-left: 5%;
max-width: 100% !important;
column-gap: 5vw;
row-gap: 5vw;
margin-right: 5%;
}
.game {
width:10%;
height:10%;
}
img {
width:17vw;
}
iframe {
width: 100%;
height: 100%;
border: none;
}<div id="all">
<h1>Website</h1>
<div class="grid">
<div class="game"><img src="images/goedash.png" alt="Geometry Dash" onclick="beep('example.github.io/pages/geodash/index.html')"></div>
<div class="game"><a href=""><img src="" alt=""></a></div>
<div class="game"><a href=""><img src="" alt=""></a></div>
</div>