Я пытаюсь отобразить две кнопки, чтобы либо просмотреть файл (обычно PDF) в iframe, либо загрузить файл напрямую (не открывать URL-адрес файла в браузере или новой вкладке).
Я создаю WordPress сайт, который работает на nginx. Я добавил заголовки nginx, чтобы принудительно загрузить PDF-файлы, и я использую атрибут download в элементе <a>, который связан с загрузкой. Я использую jquery, чтобы открыть модальное окно и создать iframe с атрибутом src URL файла, а затем добавить iframe в модальное окно.
Кнопка загрузки работает, но когда я добавляю iframe к документу, вместо встраивания PDF в iframe, он загружает файл, и iframe пуст.
Если я отключаю заголовок nginx для вложения размещения контента, то кнопка загрузки не работает - он открывает PDF-файл по URL-адресу файла в браузере, а не сразу же загружается. Но при отключенном заголовке iframe работает.
Есть ли способ указать в заголовках nginx, что, если это фрейм-фрейм, не имеет этого расположения содержимого? Или как-то иначе?
Я перестраиваю сайт, и эта функциональность фактически существует на старом сайте, но у меня нет никакого доступа к техническим аспектам старого сайта, поэтому я не могу понять, как это работает.
Старый сайт, где это работает: https://www.worldoceansday.org/youth-advisory-council-resources
Новый сайт, где это не работает: http://worldoceansday.kinsta.cloud/resources/
Nginx заголовки:
location ~* '\/([^<>:;,?"*|\/]+\.pdf)$' {
add_header Content-disposition "attachment; filename=$1";
}
jquery для добавления iframe с вложенным файлом
var url = $(this).data('file-url');
var iframe = '<iframe id="resource-iframe" class="resource-iframe" frameborder="0" vspace="0" hspace="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" allowtransparency="true" src="' + url + '" scrolling="auto"></iframe>
iframe.attr('allowtransparency','true');
$('#resource-modal-inner').html(iframe);