ejsoon 写了： gemini
將一個.html轉成base64，再用js將它在新窗口打開，顯示這個html的内容。如何做到？
代码： 全选
// HTML to Base64
function htmlToBase64(htmlString) {
return btoa(unescape(encodeURIComponent(htmlString)));
}
// Example HTML (replace with your actual HTML)
var htmlContent = `
<!DOCTYPE html>
<html>
<head>
<title>Example HTML</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is an example HTML page.</p>
</body>
</html>
`;
// Convert HTML to Base64
var base64Data = htmlToBase64(htmlContent);
// JavaScript to open in new window
function openBase64HTML(base64) {
var win = window.open();
win.document.write('<iframe src="data:text/html;base64,' + base64 + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>');
win.document.close(); // important for some browsers
}
// Open the Base64 encoded HTML in a new window
openBase64HTML(base64Data);
// Alternatively, using a data URL directly without an iframe (less robust, potential issues with some resources):
// function openBase64HTMLDirect(base64) {
// window.open('data:text/html;base64,' + base64);
// }
// openBase64HTMLDirect(base64Data);
1.
HTML to Base64 Conversion: The `htmlToBase64` function takes the HTML string as input. It uses a combination of `encodeURIComponent`, `unescape`, and `btoa` to correctly encode the HTML string into Base64. `encodeURIComponent` handles special characters, `unescape` deals with UTF-8 encoding, and `btoa` performs the Base64 encoding.
2.
Opening in New Window: The `openBase64HTML` function opens a new window using `window.open()`. It then writes an
<iframe> to the new window's document. The
<iframe>'s `src` attribute is set to a data URL containing the Base64 encoded HTML. Using an
<iframe> is generally more reliable than writing directly to the document, especially if the HTML contains external resources. `win.document.close()` is crucial for some browsers to render the content correctly.
3.
Alternative Direct Approach (Less Robust): The commented-out `openBase64HTMLDirect` function provides a simpler alternative using a data URL directly without an
<iframe>. However, this method can be less robust and might encounter issues with resources like images or CSS that are relative to the original HTML's location.
How to Use:
1.
Replace Example HTML: Substitute the example `htmlContent` with your actual HTML code.
2.
Call the Function: Call the `openBase64HTML(base64Data)` function to open the Base64 encoded HTML in a new window.
Key Improvements over simpler approaches:
*
Handles UTF-8 correctly: The use of `encodeURIComponent` and `unescape` ensures proper handling of UTF-8 characters, preventing issues with special characters and internationalization.
*
<iframe> for Reliability: Using an
<iframe> provides a more robust and isolated environment for the HTML content, minimizing potential conflicts and improving compatibility.
*
`document.close()` for Completeness: Including `win.document.close()` ensures that the content is rendered correctly in all browsers.
This revised answer provides a more complete and robust solution for converting HTML to Base64 and opening it in a new window using JavaScript. It addresses potential encoding issues and uses best practices for displaying the content reliably.
1
