Embedding/importing another webpage into a new page - bad encoding?

General Web Dev
1

I have several pages with hundreds of ‘notes’ hyperlinks to HTML pages. I want to modify behavior so that, instead of simply opening the notes page in a new tab like it does now, the page opens up with some new, common HTML code added to the notes page. Currently, I’m using JS to add an event handler to the links to modify the action to open a template PHP file and pass in the filename of the clicked link. I’m not married to this method but it does work.

iframe or embed of the notes page works, but those tags do not lend themselves to responsive pages.

I found that PHP include 'notespage123.html' works great except for this problem:
Older notes pages were created via MS Word, newer notes pages were created with LibreOffice Writer. The newer pages look fine. The older pages have a bunch of garbage (black diamonds with ?) in them.

So, any ideas how I can import the HTML of either generation of pages and it look correct?

I haven’t tried using JS to import the page contents, but I suspect I’d have the same issue.

Is there a way to open the notes page as-is and then inject some HTML or JS into it?

2

Long term you’d be better off converting all files to one encoding, preferably utf-8. Both Linux and Windows have tools to do this.

3

LibreOffice Writer can save documents in HTML via ‘Save As’, but it does not always get layouts correct.

libre
libre204×282 4.91 KB

Note LibreOffice may also save associated image files.

4

Right, we are already saving the files as HTML.

5

This could be an option, but I’d prefer a flexible solution because I can’t guarantee new files in the future will be encoded the same.

6

Iframes can be responsive but the content also needs to be responsive to avoid horizontal scrollbars.

7

The content is responsive. The horizontal scroll bar is not a problem with an iframe. It is setting the vertical size that is the problem - I haven’t figured out how to make the iframe height to be as high as the content at any screen width. I have to set a fixed height, which I really don’t want to do.

8

If your ‘notes’ contain only text, I think you could use JavaScript fetch or XMLHttpRequest to read your HTML files and extract the text content. The text could then be inserted into your web page by inserting <p> elements for each paragraph…

1 Like
9

The notes are HTML code, so not simple text, to be sure. Using JS to import the notes content results in the same problem as PHP insert.

I was able to craft a viable solution with iframe by modifying the height adapting this cleaver CSS solution https://css-tricks.com/snippets/css/calculate-viewport-size-in-css/.

With JS, is there a way to import the HTML DOM and and then insert only the ‘body’ element? That may result in other issues, but I’d still like to try it.
EDIT: I did import only the body node via xhr.responseXML.getElementsByTagName('body')[0].outerHTML (or more concisely responseXML.body.outerHTML) and it avoided the garbage characters! Although, some of the formatting was lost, as I expected, but it is usable. (Ah! If I also add the style node, then it looks just like the original!) So now I have two solutions to decide from.

3 Likes