Как мне добавить файл google do c в модальное окно из папки встроенного диска Google? - PullRequest
0 голосов
/ 08 мая 2020

Мне удалось показать сетку самих файлов, но я не могу сделать всплывающие окна отдельных файлов в модальном окне. Вместо этого они открываются в другом окне браузера. Это ломает мне голову.

Встроенная папка Google Диска

<ul id="ai_dropdown" class="rd-navbar-dropdown" style="background:transparent;border:none;">
  <li class="rd-navbar-aside-right" width="600px" height="300px">
    <iframe src="https://drive.google.com/embeddedfolderview?id=1TsnXSknXN6FdrgsfB7nyT4oZ786YNdAL#grid"
       style="width:450px;height:600px;border:0;margin-left:-31px;margin-top:-28px;background-color:#fff;">
    </iframe>
  </li>
</ul>

My Modal

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"  width="960" height="600">
  <div class="modal-dialog" width="700px">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body">
          <iframe id="iframe" src="" width="100%" height="600px" frameborder="0" allowtransparency="true"></iframe>  
      </div>
    </div>
  </div>
</div>

My Javascript

$("#ai_dropdown li>iframe>a").on('click', function(e) {
  var option = $(this).attr('src');
  $('#iframe').attr('src', option);
}); 

1 Ответ

0 голосов
/ 11 мая 2020

Поскольку отдельные файлы в представлении папок отображаются в элементе привязки, когда вы щелкаете по ним, вы переходите на страницу, установленную в атрибуте href. Вы можете предотвратить поведение якорных элементов по умолчанию, используя метод preventDefault , как показано ниже. Кроме того, в элементах привязки нет атрибута src, href - это атрибут, используемый для установки URL:

$("#ai_dropdown li>iframe>a").on('click', function(e) {
      e.preventDefault();  
      var option = $(this).attr('href');
      $('#iframe').attr('src', option);
}); 

EDIT

Поскольку iframe необходимо загрузить перед выбором элементы, и вы не можете получить доступ к его элементу с помощью селектора выше, как объяснено здесь , я использовал методы contents и find для решения этой проблемы и использовал приведенный ниже код :

window.onload = function () {
            $("#iframe-folder-list").contents().find('a').click(function (e) {
                //Doesn't trigger
                console.log(e)
                e.preventDefault();
                var option = $(this).attr('href');
                $('#iframe').attr('src', option);
            });
        }

Но все равно не работает. Код внутри функции события click не запускается, и консоль показывает эту ошибку:

Uncaught (в обещании) DOMException: запрос предварительной загрузки навигации сервис-воркера был отменен до урегулирования preloadResponse. Если вы собираетесь использовать preloadResponse, используйте waitUntil () или responseWith (), чтобы дождаться выполнения обещания.

Вдобавок к этому я увидел 2 блока div, которые используются в качестве ссылок с классами flip-entry-thumb и flip-entry-title, но отсутствует (видимый) код сценария, в котором происходит процесс преобразования этих div в ссылки (например, с событием onlcik). Итак, моя теория заключается в том, что Google каким-то образом делает этот процесс, не имея возможности изменить его или ограничить iframe модификациями.

...