How to encode HTML file to base64?

Question

I'm a beginner at HTML and JavaScript. And trying to encode a HTML file to Base64 code and then put that encoded string into <iframe src=" ENCODED STRING HERE" from another HTML file.

What I'm trying to do here is put encoded string into popup iframe like below capture to make it visible,

  var i_frame_98c3be4abbe943db99555415352b65f5 = $('<iframe src="ENCODED STRING FROM HTML FILE" width="500" style="border:none !important;" height="300"></iframe>')[0];

However, I don't know how to.

I know there is encode/decode website base64encode.org but I have to do it by hand. I want to make it be encoded directly and put the code in the iframe src when I open up the file.

Is there any ideas or functionality in html to encode directly?

p.s. I can edit to upload html code if you want to see.

good browsers have `btoa` method - do you need to do this encoding in the browser? `var datauri = 'data:text/html;base64,' + btoa(htmlsrc);` — Jaromanda X, Aug 25 '17 at 05:29

score -1 · Answer 1 · answered Aug 25 '17 at 05:33

-1

https://www.w3schools.com/jsref/jsref_encodeURI.asp has a good reference to encode URI.

I will also to checkout the solution here to set the src value of the iframe : dynamically set iframe src

Demo jsfiddle: https://jsfiddle.net/np7hp5jo/1/

function appendHtml(el, str) {
  var div = document.createElement('div');
  div.innerHTML = str;
  while (div.children.length > 0) {
    el.appendChild(div.children[0]);
  }
}

var encodedUrl = encodeURI('https://www.lifehacker.com.au/?r=US');

var html = '<iframe id="myIframe" src="'+encodedUrl+'" onLoad="iframeDidLoad();"></iframe>';
appendHtml(document.body, html); // "body" has two more children - h1 and span.

Happy learning.

answered Aug 25 '17 at 05:33

Umang

815
5
17

1

The best way to use readAsDataURL method to read the contents of the specified Blob or File. When the read operation is finished, the readyState becomes DONE, and the loadend is triggered. At that time, the result attribute contains the data as a URL representing the file's data as a base64 encoded string. Base on: https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL – Suresh Sapkota Aug 25 '17 at 06:13
@SureshSapkota Hi, how can I read local html file from javascript then? instead of loading by using `input`? – paulc1111 Aug 25 '17 at 07:18
Use XMLHttpRequest when reading local files which is much easier to get whole file. – Suresh Sapkota Aug 25 '17 at 08:42
`encodeURI` replaces characters that are not allowed in a URI with their percent encoded counterparts. This has absolutely nothing to do with generating a `data:` scheme URI using Base64 encoding. – Quentin Aug 25 '17 at 12:34
@SureshSapkota — I'm not sure if what you are written qualifies as an answer (in which case it should be an answer, not a comment) or if it is a real comment (in which case it should be a comment on the *question* as it has nothing to do with this answer). – Quentin Aug 25 '17 at 12:38

How to encode HTML file to base64?

1 Answers1