Я пытаюсь создать iframe с srcdo c через js. Вот строка в srcdo c (в одной строке):
<h1 id='my-article-title'>My Article title</h1><p>Please, begin your article with a title like
this:</p><p>This is a markdown editor, Type here your article body and use the tools or markdown
code to style it. If you need help or you want to know more about markdown, click on the
<strong>light bulb</strong> icon in the bottom left of this form. You can preview your article
by clicking on the icons in the bottom right of this form.</p><p><strong>Click here to begin
writing</strong></p>
, и я ожидаю такого поведения: https://www.w3schools.com/code/tryit.asp?filename=GCI7PRC9FLX8
<!-- expected behavior -->
<iframe srcdoc="<h1 id='my-article-title'>My Article title</h1><p>Please, begin your article with a title like this:</p><p>This is a markdown editor, Type here your article body and use the tools or markdown code to style it. If you need help or you want to know more about markdown, click on the <strong>light bulb</strong> icon in the bottom left of this form. You can preview your article by clicking on the icons in the bottom right of this form.</p><p><strong>Click here to begin writing</strong></p>">
<p>Your browser does not support iframes.</p>
</iframe>
Но вместо этого я получаю пустую страницу, и когда я проверяю свой iframe, вот что я получаю:
Однако, если я щелкну правой кнопкой мыши на iframe тег в инспекторе и скопируйте external html, вот что я получаю:
<iframe style="min-height:200px;min-width:400px" scrolling="no" srcdoc="<h1" id="my-article-title">My Article title</h1><p>Please, begin your article with a title like this:</p><p>This is a markdown editor, Type here your article body and use the tools or markdown code to style it. If you need help or you want to know more about markdown, click on the <strong>light bulb</strong> icon in the bottom left of this form. You can preview your article by clicking on the icons in the bottom right of this form.</p><p><strong>Click here to begin writing</strong></p>><p>Your browser does not support iframes.</p></iframe>
согласно inner html:
My Article title</h1><p>Please, begin your article with a title like this:</p><p>This is a markdown editor, Type here your article body and use the tools or markdown code to style it. If you need help or you want to know more about markdown, click on the <strong>light bulb</strong> icon in the bottom left of this form. You can preview your article by clicking on the icons in the bottom right of this form.</p><p><strong>Click here to begin writing</strong></p>><p>Your browser does not support iframes.</p>
Проблема, как вы можете видеть, заключается в том, что iframe запутывается между id в переданном html и id iframe! Как я могу это исправить?
Обходной путь:
Мой обходной путь заключается в том, чтобы вместо создания iframe программно получить верхний уровень div и установить внутренний HTML:
var article_feed = document.getElementById('article_feed');
article_feed.innerHTML = "<iframe style='min-height:200px;min-width:400px' scrolling='no' srcdoc="+article['full_text']+"><p>Your browser does not support iframes.</p></iframe>";
Чтобы создать iframe в html и затем получить доступ к свойству srcdo c в javascript:
var article_frame = document.getElementById('article_frame');
article_frame.srcdoc = article['full_text'];