So, I was making a HTML loader that uses HTML from raw GitHub URLS. Smaller HTMLs loaded but when I tried to load larger HTMLS they were incomplete. Every time I loaded a large HTML they cut off at the same time. Is this a character limit? Or is this a problem with my code?
I don’t really know how to fix this which is why I’m asking. Code down below:
<html>
<head>
<title>f1re</title>
</head>
<body>
<div class="topbar">
<button class="bl small" onclick="reload()">
↻
</button>
<button class="small" onclick="info()">?</button>
<input type="text" id="URL" placeholder="Enter GIT URL">
<button class="br big" onclick="loadFunc()">
Go to URL
</button>
</div>
<iframe id="frame"></iframe>
</body>
<script>
let proxy = "";
let curr = 'about:blank';
async function loadFunc(){
let link = document.querySelector("#URL").value;
let data = await fetch(proxy.toString()+link.toString());
let doc = await data.text();
curr = link;
document.querySelector("#frame").src = "data:text/html;charset=utf-8,"+doc.toString();
}
async function reload(){
let link = curr;
let data = await fetch(proxy.toString()+link.toString());
let doc = await data.text();
curr = link;
document.querySelector("#frame").src = "data:text/html;charset=utf-8,"+doc.toString();
}
function info(){
alert('f1re only works for GIT URLS.');
if(prompt('View GIT URL list? [Y]es / [N]o').toString() === 'Y'){
alert('Viewing GIT URLS... Click OK to open next page.');
alert('https://raw.githubusercontent.com/ThisAintComputin/GitSite/refs/heads/main/Main.html');
alert('NOTE: You can make your own GIT sites. (it is very complicated for beginners though)');
};
}
</script>
<style>
body{
margin: 0px;
}
.topbar{
display: flex;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
}
#URL{
width: 85%;
text-align: center;
}
.big{
width: 10%;
}
.small{
width: 5%;
}
button{
background-color: black;
color: red;
}
input{
background-color: black;
color: red;
}
.bl{
border-bottom-left-radius: 10px;
}
.br{
border-bottom-right-radius: 10px;
}
#frame{
width: 100%;
height: 90%;
position: fixed;
top: 3%;
border: none;
}
</style>
</html>