How to add custom attributes to the `DOCTYPE` tag with NextJS?
Question
One of the requirements of a third party that I'm working with is that I need to add the following at the top of the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This is taken from here .
I've obviously looked at the NextJS docs but I can't find a way to change this tag.
This is how it looks now with my custom _document.ts .
<!DOCTYPE html>
<html lang="en">
<head>
<meta property . . .
. . .
Is it possible to change it?
What about on page load? Doing document.getElementsByTagName('!DOCTYPE html') won't work obviously, so I'm not really sure what to do here.
1 answers
solution1
0 2022-12-06 15:36:45
You cannot just use dangerouslySetInnerHTML because it is impossible to insert <.DOCTYPE> and root tags into other tags. To be able to do such a thing is necessary to create an iframe tag and pass the HTML as a string in the srcDoc parameter: Just like that:
const myhtml =
"<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><meta http-equiv='X-UA-Compatible' content='IE=edge'><meta name='viewport' content='width=device-width, initial-scale=1.0'><title>Document</title></head><body><h1>Teste</h1></body></html>";
return (
<iframe srcDoc={myhtml}></iframe>
);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.