Как открыть новую пустую вкладку, "" или about: blank, в формате файла, отличном от text / html - PullRequest
Новая
       81

Как открыть новую пустую вкладку, "" или about: blank, в формате файла, отличном от text / html

0 голосов
/ 10 марта 2020

Если я открою новую вкладку с помощью JavaScript и запишу в нее, она будет читаться как text/html. HTML теги будут работать внутри него. Но что, если я захочу открыть его как text/plain или, может быть, application/xhtml+xml? data:, URL-адреса запрещены для открытия всеми основными браузерами по соображениям безопасности, поэтому я не могу использовать этот метод. Помещение <iframe> во вкладку работает, но это не то, к чему я стремлюсь.

Редактировать: Добавлен пример кода: 

const Input = document.querySelector(`textarea`),
VW = screen.width * devicePixelRatio,
VH = screen.height * devicePixelRatio,
NewTab = open(``,`_blank`,`left=${VW/2},top=${VH/2},width=${VW/4},height=${VH/4}`),

UpdatePage = () => 
{
    NewTab.document.documentElement.innerHTML = Input.value;
};

Input.addEventListener
(
    `input`, ()=>
    {
        UpdatePage();
    }
);
*
{
    margin: 0;
    padding: 0;
    border: 0;
}

body
{
  display: flex;
  flex-direction: column;
  height: 100vh;
}

textarea
{
    flex: 1;
    resize: none;
}
<textarea wrap="soft" placeholder="Type stuff to be put into the new tab"></textarea>

<form action="https://cdpn.io/pen/define" method="POST" target="_blank">
 <input type="hidden" name="data" value='{"title": "Example", "html": "<textarea wrap="soft" placeholder="Type stuff to be put into the new tab"></textarea>", "css": "*\n{\n    margin: 0;\n    padding: 0;\n    border: 0;\n}\n\nbody\n{\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n}\n\ntextarea\n{\n    flex: 1;\n    resize: none;\n}", "js": "const Input = document.querySelector(`textarea`),\nVW = screen.width * devicePixelRatio,\nVH = screen.height * devicePixelRatio,\nNewTab = open(``,`_blank`,`left=${VW/2},top=${VH/2},width=${VW/4},height=${VH/4}`),\n\nUpdatePage = () => \n{\n    NewTab.document.documentElement.innerHTML = Input.value;\n};\n\nInput.addEventListener\n(\n    `input`, ()=>\n    {\n        UpdatePage();\n    }\n);"}'>

 <input type="submit" value="Create New Pen with Prefilled Data">
</form>
...