Блог

Главная - Вопросы по программированию - Невозможно добавить динамический скрипт и тег стиля для динамического создания html и iframe

Невозможно добавить динамический скрипт и тег стиля для динамического создания html и iframe

#javascript #html #angular #iframe

#javascript #HTML #угловатый #iframe — фрейм

Вопрос:

У меня есть строка, которая поступает из внешнего источника. Теперь я хочу интегрировать этот скрипт и тег стиля в свое приложение и выполнить scipt.

   const styleScriptText = '<style type="text/css">#checkoutmodal .checkoutmodal-box{background:#FFF !important}</style><script src="https://someurl/lib/jquery.min.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function() { console.log("test")});</script>'

Для достижения этой цели я создал динамический html и добавил его в iframe

  const html = `<html>
        <head>
       ${styleScriptText}
        </head>
          <body>
          
         
          </body>
    </html>`;
    const iframe = document.createElement('iframe');
    iframe.src = 'data:text/html;charset=utf-8,'   encodeURI(html);
    document.body.appendChild(iframe);

Теперь проблема в том, что когда я проверяю этот iframe, я не получаю теги скрипта и стиля, пожалуйста, найдите прилагаемые

введите описание изображения здесь

Я не уверен, какую ошибку я делаю, любая помощь высоко ценится.

Редактировать: Альтернатива этому, есть ли какой-либо способ, которым мы можем использовать styleScriptText в приложении и выполнять функции скрипта?

Комментарии:

1. дважды щелкните по вашему источнику, он есть, но браузеры имеют ограничения на количество символов, которые они отображают в значении атрибута

2. @EugenSunic его там нет, даже после редактирования в формате html я получаю только <тип стиля=»текст / css»></style>

3. но его там не будет, он будет в src с тех пор, как вы его туда поместили…

Ответ №1:

Вы вставляете свой HTML-код в атрибут src iframe вместо содержимого iframe

 const styleScriptText = '<style type="text/css">#checkoutmodal .checkoutmodal-box{background:#FFF !important}</style><script src="https://someurl/lib/jquery.min.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function() { console.log("test")});</script>'

Определите html и установите sourxe

 const html = `<html>
        <head>
       ${styleScriptText}
        </head>
          <body>
          
         
          </body>
    </html>`;
const iframe = document.createElement('iframe');
iframe.src = 'data:text/html;charset=utf-8,'   encodeURI(html);

Установите содержимое iframe

 var doc = iframe.contentWindow.document;
doc.open();
doc.write(html);
doc.close();
document.body.appendChild(iframe);