Блог

Главная - Вопросы по программированию - Как использовать строковую переменную в качестве ссылки src в теге embed?

Как использовать строковую переменную в качестве ссылки src в теге embed?

#html #typescript #src

Вопрос:

Я должен внедрить средство просмотра документов в свой проект. Из-за ограничений ссылка на документ получена в качестве параметра маршрутизатора и правильно получена в переменной с именем link в файле doclauncher.ts. Теперь я попробовал эти два варианта в doclauncher.html файле, но ни один из них, похоже, не работает:

 div class="container">
  <embed id = "doc"
    src = ""
    type="application/pdf"
    height="100%"
    width="100%"
  />
</div>
<script>
  document.getElementById("doc").src= '  {{link}}  '
</script>

и

 div class="container">
  <embed id = "doc"
    src = {{link}}
    type="application/pdf"
    height="100%"
    width="100%"
  />
</div>

Что мне делать?
Использование Angular 11.2.13 и серверной части в
редактировании машинописи: вот как была получена ссылка

  ngOnInit(): void {
      this.route.queryParams.subscribe(params => {
      this.link = params['link'];
    });
}

Я проверил, распечатав это.ссылка, что все в порядке 🙂

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

1. {{ }} скобки зависят от структуры. поэтому необходимо проверить, обеспечивает ли фреймворк или базовая технология значение при вызове с помощью синтаксиса {{}}. попробуйте консоль. запишите это в журнал. Обычно document.getElementById(«doc»).src= ‘ ссылка ‘; должно было хватить только для JS.

2. Я использую Angular 11.2.13 и машинопись… это тоже не сработало

3. затем просто запустите через консоль. войдите в журнал и посмотрите, не возникнет ли какая-либо ошибка….если приведенный выше код сам по себе не работает, то ошибка будет смонтирована для этого или если код работает, но по каким-либо причинам значение ссылки немного отстает или ссылка находится в другом месте или имеет значение не так, как ожидалось, консоль будет указывать это. нажмите обновить до с включенными инструментами разработчиков. Я предполагаю, что {{ }} имеет свои собственные вычислительные затраты, где атрибут src имеет свой собственный поток, который намного быстрее и выполняется в состоянии готовности содержимого DOM раньше всего остального и начинает извлекать вещи.

4. попробуйте это взять фактическое значение, которое было бы заменено на {{ссылка}}. добавьте его в виде строки, например, src = ‘/путь/файл.pdf’, запустите, чтобы проверить, работает ли код. если это произойдет, то у нас будет гонка потоков. Объектная модель браузера выполнила src задолго до того, как фреймворк смог заменить значение.

5. просто добавив в вышесказанное, как мы выполняем ленивую загрузку….. мы либо сохраняем значение src пустым, а затем через триггер, иначе говоря, когда пользователь переходит в определенный диапазон просмотра, мы заменяем пустое значение фактическим значением. В тот момент, когда это значение изменяется, браузер запускает процесс извлечения менее чем в мгновение ока. Это поведение, которое вы не можете изменить.

Ответ №1:

Используйте атрибут setattribute следующим образом

 <script>
  document.getElementById("doc")setAttribute("src", "{{link}}")
</script>
Метки: