我如何将一个google doc文件添加到一个模式中，从一个嵌入式google drive文件夹？

Question

我已经设法显示一个网格的文件本身，但我似乎不能使单个文件弹出的模式。他们反而在不同的浏览器窗口中打开。这个让我绞尽脑汁。

嵌入的谷歌驱动器文件夹

<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>

我的模态

<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>

我的Javascript

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

Answer 1

由于文件夹视图中的单个文件是以锚元素呈现的，当你点击它们时，它将带你到设置在 href 属性，可以防止锚元素的默认行为。您可以使用以下属性来阻止锚元素的默认行为 防止违约 方法如下。另外，没有 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需要在选择元素之前被加载，你不能用上面的选择器访问它的元素，如上所述 此处，我用的是 内容 和 找到 方法来解决这个问题，并使用了下面的代码。

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 事件函数没有被触发，控制台显示这个错误。

未捕获(在承诺中)DOMException.服务工作者导航预加载请求在'preloadResponse'结算前被取消。服务工作者导航预加载请求在'preloadResponse'结算之前被取消。如果你打算使用'preloadResponse'，请使用waitUntil()或responseWith()来等待承诺的结算。

除此之外，我还看到了2个div，这些div被用作类的链接。flip-entry-thumb 和 flip-entry-title但是没有任何脚本代码存在（可见）将这些divs转换为链接的过程（例如用一个onlcik事件）。所以我的理论是Google以某种方式完成了这个过程，而不能改变它或限制iframe的修改。