Прикрепить элемент при открытии ссылки формата PDF

#javascript #jquery

#JavaScript #jquery

Вопрос:

Я что-то тестирую и не совсем уверен, что это возможно. У меня есть базовый href для внешнего PDF-файла. Я хотел бы прикрепить к нему динамический элемент, скажем, тег div и h1.

 <a href="https://osm.hpi.de/teaching/profSem/statistics101.pdf" onclick="createElements()">View</a>

<script>
function createElements(){
   var div = $(document.createElement('div'));
            div.innerHTML = '<h1 id="myTitle" class="back-button" alt="custom-title">';
            $('#myTitle').css({
                'position': 'absolute',
                'z-index': '99',
                'top': '16px',
                'left': '12px',
                'width': '11%',
            });
}
</script>

В принципе, когда открывается внешняя ссылка формата href, я хочу добавить прикрепить тег h1 к этому документу. Однако не уверен, что это возможно, пока тестирую воду. Приведенный выше код, похоже, не работает, но был бы признателен за обратную связь, чтобы узнать, можно ли это сделать с помощью простого ванильного javascript / jquery.

1. «Я хочу добавить прикрепить тег h1 к этому документу» Вы имеете в виду PDF? Если это так, то это невозможно. Если вы имеете в виду, что хотите добавить h1 на текущую страницу, это также невозможно, поскольку текущая страница уже выгружена, поскольку вы отправили пользователя в файл PDF.

Ответ №1:

Вы не можете повлиять на документ, который еще не открыт. Чтобы это сработало, ваш код javascript должен быть внутри PDF, но поскольку браузеры обрабатывают содержимое PDF по-разному (как и должны), он никогда не будет выполнен. Короче говоря, я не думаю, что это возможно.

Ответ №2:

Ваш href всегда будет отправлять пользователя в программу просмотра PDF в браузере, и вы потеряете контроль над этим.

Если вы хотите, чтобы элемент был виден над или поверх файла PDF, вы можете использовать «страницу шаблона», где у вас есть свой HTML-элемент и полноэкранный iFrame с src, который указывает на файл PDF.

Это отобразит средство просмотра PDF в браузере в этом iFrame winthin на странице вашего шаблона.

Пример.

 <div>
  <div>
    <!-- Your element here (you can make this absolute to make it lay over the pdf file etc.. -->
  </div>
  <iframe src=".../.pdf" style="width:100vw;height:100vh">
</div>

Ответ №3:

Возможно, вам вообще не нужен jQuery. Я бы сделал что-то вроде этого (обратите внимание, что я заранее оставляю div пустым):

 <a href="https://osm.hpi.de/teaching/profSem/statistics101.pdf" onclick="createElements()">View</a>
<div id="myDiv"></div>

function createElements(){
   var text = document.createElement("h1");
   text.innerHTML ="MY heading";
   document.getElementById("myDiv").appendChild(text);
}