Блог

Главная - Вопросы по программированию - Бегун Iframe с вводимым URL

Бегун Iframe с вводимым URL

#javascript #html #css #google-apps-script #iframe

#javascript #HTML #css #google-apps-script #iframe

Вопрос:

* Обратите внимание, что я использую скрипты приложений Google

Я пытаюсь закодировать простую программу в качестве доказательства концепции, концепция которой представляет собой Iframe, который реагирует на ввод текстового поля html. До сих пор я изучал триггеры для элемента формы (я решил использовать onsubmit) и исследовал изменение src Iframe. Он начинает работать, когда я загружаю его, он выглядит так:

захват экрана

Однако после этого я ввожу URL-адрес в текстовое поле и нажимаю отправить. Он перезагружается, а затем отображает полностью пустой экран. Вот мой код:

code.gs

 function doGet() {
  return HtmlService.createTemplateFromFile('Index')
  .evaluate();
}
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
  .getContent();
}

Index.HTML

 <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include ('Css'); ?>
  </head>
  <body>
    <form>
      <input type="text" id="uri" name="uri"><br><br>
      <input type="button" value="Submit" onclick="frameS">
    <form>
    <script>
        function frameS() {
          var urv = document.getElementById('uri');
          var ura = urv.value;
          url1 = trim(ura);
        }
        function trim(str){
          return str.replace (/^s |s $/g, '');
        }
    </script>
    <iframe allowfullscreen="true" width="600" height="400" id="abc" src="https://www.google.com/webhp?igu=1">sorry, couldn't load</iframe>
    <?!= include ('javascript'); ?>
  </body>
</html>

javascript.html

 <script>
  Logger.log('hit')
</script>
<script>
window.addEventListener('load', function() {
  console.log('Page is loaded');
});
</script>

Css.html * пожалуйста, обратите внимание, что таблица стилей в настоящее время ничего не делает, я просто включаю ее для будущей разработки

 <style>
  /* CSS reset */
 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
     margin:0;
     padding:0;
}
 html, body {
     margin: 0;
     padding: 0;
}
 body {
     font-family: 'Roboto', sans-serif;
     font-weight: 100;
}
 fieldset {
     border: 1px solid white;
     color: white;
     text-align: center;
     width: 200px;
}
 legend {
     padding: 0 10px;
}
</style>

Спасибо за ваше время и буду признателен за любые отзывы о моем коде, связанные с вопросом или нет.

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

1. В консоли отладки, вероятно, отображаются ошибки. Например, он будет жаловаться .getElementById(abc) , поскольку так и должно быть .getElementById("abc") .

2. Взгляните на консоль разработчика вашего браузера.