How to embed HTML into a web page without using “iframe
While coding my personal website, I ran into a problem: I want to create a modal window with an “iframe” tag, but Google Translate does not support text in the iframe. So I tried to embed another HTML file in index.html with JavaScript or PHP.
GOAL
The goal today is to embed sub.html in index.html without using iframe tags so that Google Translate will work for the embedded text.
Below is how to embed the code in an iframe tag.
<iframe src="sub.html"></iframe>
Environment
PHP8.3.8
Latest Google Chrome (Version 127.0.6533.90)
Method
Method1: Using php include function
<?php include 'sub.html'; ?>
//<?php include('sub.html'); ?> also worksChange index.html into index.php to use PHP function in index file.
Or you can use html as PHP by using “AddType” in .htaccess. Reference: Parse HTML as PHP using HTACCESS File
Method2: JQuery .load() in JavaScript
<div id="frame-content"></div>
<!-- need to read jQuery -->
<script src="jquery.min.js"></script>
<script>
$("#frame-content").load('sub.html');
</script>Trouble Shooting
Opening index.html in a local environment causes a CROS policy error as below. For correct results, we must use a web server or a local HTTP server.
Access to XMLHttpRequest at 'file:///C:/.../sub.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.Reference: How do you set up a local testing server?
