I know this is simple but I can’t find the right words to get the answer I’m looking for on Google.
I have a simple HTML file that takes in a search URL for OverDrive. For example,
https://piercecounty.overdrive.com/search/title?page=2&sortBy=newlyadded&language=en&maturityLevel=generalcontent&mediaType=ebook&showOnlyAvailable=true&subject=10&mediaTypes=ebook
I am then using Fetch to make a GET request to OverDrive. The server returns HTML that corresponds to the search results for this URL. What I want to do is then render this HTML. That is, I don’t just want to display it but I actually want the web browser to run all scripts and execute the CSS and truly render the page for me.
Here’s what I have so far (NOTE this is just displaying but not rendering the HTML):
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="app.js"></script>
</head>
<body>
<h1>Hyper OverDrive</h1>
<div>
<input type="text" id="url" placeholder="Enter a URL">
<button id="submit_button">Submit</button>
</div>
</body>
</html>
app.js
window.addEventListener("DOMContentLoaded", registerButtonListener);
function registerButtonListener() {
let button = document.querySelector("#submit_button");
button.addEventListener("click", async () => {
let url = document.querySelector("#url").value;
let response = await fetch(url);
let html = await response.text();
document.body.innerHTML = html;
});
}
I am looking for a solution that doesn’t require me to introduce additional technologies/libraries/etc. I feel like this can be done with just HTML and Javascript.
Using document.body.innerHTML as I’m doing replaces the HTML but doesn’t cause the web browser to re-render the page
One idea I had was to use an HTML form but can I set the route for the action attribute to this ridiculously long URL?