Скрыть iframe под кнопкой "загрузить"

  • 8 Ответов
  • 208 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

Здравствуйте.
У меня вот какой вопрос:
На странице материала я делаю iframe, файл PDF для него берется с диска ondrive (ну это не важно).
Цитировать
<iframe src="https://onedrive.live.com/embed?cidxxxxxxxxxxxxxxxxxxxx" width="400" height="400"></iframe>
Я хочу сделать так, чтобы сразу этот файл не загружался, а только после нажатия кнопки типа "Развернуть/Посмотреть" на странице.
Отдельным вторым материалом по-моему это делать как-то неразумно, а другое мне в голову не идет.
Подскажите пожалуйста, как лучше такое сделать?

*

effrit

  • *****
  • 7441
  • 815
  • effrit.com
Re: Скрыть iframe под кнопкой "загрузить"
« Ответ #1 : 28.03.2017, 18:41:01 »
здра.
почитайте, как работет lazy-загрузка и напишите js-скриптик, который будет по нажатию на кнопку спойлера делать замену пути к источнику на данные из data-original.

Re: Скрыть iframe под кнопкой "загрузить"
« Ответ #2 : 28.03.2017, 19:51:20 »
Так... почитал :)
Про скрипт замены пути я не понял.
Но вот какое решение у меня нарисовалось:
Поставить плагин lazy-load и плагин спойлера. Пока файл под спойлером, он не видим и не грузится, открывается спойлер и идет загрузка.
Правильно я рассуждаю? Вроде все логично. Надо пробовать :)
Спасибо за направление поиска.

*

effrit

  • *****
  • 7441
  • 815
  • effrit.com
Re: Скрыть iframe под кнопкой "загрузить"
« Ответ #3 : 28.03.2017, 20:00:45 »
да все правильно, просто обычно скрипты lazy-load обрабатывают картинки, а не pdf-ки.
поэтому в вашем случае логичнее просто плагин спойлера поставить и в нем дописать в нажатие на кнопку спойлера поиск и замену для дочернего pdf

*

effrit

  • *****
  • 7441
  • 815
  • effrit.com
Re: Скрыть iframe под кнопкой "загрузить"
« Ответ #4 : 28.03.2017, 20:12:04 »
т.е. плагин спойлера есть,
внутрь спойлера пишем вывод pdf без фреймов, через

<embed class="lazy" data-original="http://example.com/the.pdf" src="" width="500" height="375" type='application/pdf'>


в обработчик открытия спойлера дописать
Код
$("embed.lazy").each(function() {
    $(this).attr("src",$(this).attr("data-original"));
    $(this).removeAttr("data-original");
});

Re: Скрыть iframe под кнопкой "загрузить"
« Ответ #5 : 30.03.2017, 00:57:59 »
Добрался снова до этого сайта :)
У меня нет ссылки на сам файл, есть ссылка на этот ondrive, а файлы будут оттуда. Получается только "внедрение" сделать. Оно там так называется. И выводится фреймом.
Получилось в общем-то практически то, что хотел.
Я использовал плагин Tabs & Slider & Spoilers (joomext.ru/plugin-tabs-slider-spoilers)

Единственное, чего понять не могу, этот файл во фрейме под спойлером как-то обрезано показывается. Фрейм полностью, а внутри него не всё.
Сам сайт у меня локальный пока, поэтому попытался на картинке показать.
Поясню. Сверху тот же код без спойлера - там все нормально (pdf-ка во весь фрейм)
<iframe src="https://onedrive.live.com/embed?cid=B4Fxxxxxxxxxx" width="476" height="288" frameborder="0" scrolling="no"></iframe>
Под спойлером тот же код, фрейм полностью, а файл только на треть.
Блин, всю голову уже сломал, не могу понять почему так.


Re: Скрыть iframe под кнопкой "загрузить"
« Ответ #7 : 30.03.2017, 03:00:05 »
тут просто условный кусок вставлен, у меня стоит высота 950
на скрине маленький кусочек сверху спойлера имеет точно такой же код, но файл в нем идет до конца фрейма.

UPD ААААА! Простите, я дебила кусок!  :laugh: эта фигня была из-за изменения масштаба в браузере! Блин, я часа 4 разбирался в непонятных мне кодах, рыскал по форумам. Ширина была в процентах, высота в пикселях, а внутренности-то фрейма в размерах не менялись.... Вот вечно так, какая-нибудь дебильная ошибка/недочет кучу времени съедает.
« Последнее редактирование: 30.03.2017, 03:24:53 от antoxa12 »

*

effrit

  • *****
  • 7441
  • 815
  • effrit.com