Your issue is likely due to security restrictions in you web browser. Browsers typically don't allow web pages to access local files using the 'file:// protocol' in iframes for security reasons.
If you must use local files you can try the following, hopefully only for testing and not real world scenarios -
In Chrome, launch it with the '--allow-file-access-from-files' flag.
In Firefox, set 'security.fileuri.strict_origin_policy' to false in the 'about:config'.
For Edge, use the '--allow-file-access-from-files' flag.
I would also use a data URL, instead of setting the 'src' to a file path, you could load the content of the HTML file and set it as a data URL. It does however requires that your main page is served from a web server, your code will be similar to -
function switch_page(new_page) {
fetch('/path/to/your/html/files/${new_page}.html`)
.then(response => response.text())
.then(html => {
const dataUrl = `data:text/html;charset=utf-8,${encodeURIComponent(html)}`;
webpage_id.src = dataUrl;
});
}