Javascript phtoswip：从iframe获取图像列表_Javascript_Ajax_Iframe_Photoswipe

Javascript phtoswip：从iframe获取图像列表

javascript ajax iframe

Javascript phtoswip：从iframe获取图像列表,javascript,ajax,iframe,photoswipe,Javascript,Ajax,Iframe,Photoswipe,这是使用Photosweep的基本示例代码： <!DOCTYPE html> <html> <head> <title>PhotoSwipe</title> ... <script type="text/javascript"> (function(window, PhotoSwipe){ document.addEventListener('DOMContentLoaded', function(){

这是使用Photosweep的基本示例代码：

<!DOCTYPE html>
<html>
<head>
<title>PhotoSwipe</title>
...
<script type="text/javascript">

  (function(window, PhotoSwipe){

    document.addEventListener('DOMContentLoaded', function(){
      var options = {},
      instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );  
    }, false);
  }(window, window.Code.PhotoSwipe));   
</script>
</head>
<body>
...
<div id="MainContent">
<div class="page-content">
    <h1>PhotoSwipe</h1>
</div>

<ul id="Gallery" class="gallery">
    <li><a href="images/full/001.jpg"><img src="images/thumb/001.jpg" alt="Image 001" /></a></li>
    ...
    <li><a href="images/full/018.jpg"><img src="images/thumb/018.jpg" alt="Image 018" /></a></li>
</ul>
</div>  
</body>
</html>

而不是

PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );

将ul移动到external list.html文件（iframe的源）中后，如下所示：

...
<div id="MainContent">
<div class="page-content">
    <h1>PhotoSwipe</h1>
</div>
    <iframe id="foo" src="list.html"></iframe>
...

。。。
擦照片
...

但它不起作用。为什么?

调试器显示以下异常：“Code.photosweep.createInstance:没有要传递的图像。” 编辑：-来自评论-

这是一个跨领域的问题。如果文件都在我的Web服务器上，为什么会出现跨域问题？我应该如何参考它们以避免此类问题

对我来说是有效的吗？（而且预期寿命较长……）

这是一个跨域的问题，因为您对iframe内容的引用是正确的。您能创建一个示例JSFIDLE吗？zvona，您是对的：如果我从我的Web服务器（127.0.0.1/show.html）打开该文件，它不起作用，但是如果我作为文件打开它就起作用（事实上，只与opera一起使用，在某些安全问题上不与chrome一起使用，我猜）。是否有解决此类跨域问题的方法？我可以使用哪种方法来获得使用从外部文件获取的列表更新图像列表的可能性？以及：如果文件都在我的pc上，为什么我会遇到跨域问题？为了避免这个问题，我应该如何提及它们？PS:ATOzTOA，既然zvona遇到了问题，我认为一个样本是没有用的，是吗？不过，谢谢你！此外，我想知道这是否是一种有效的方法，也就是说，它是否不会引起安全问题，可能会导致某一天浏览器阻止它。

...
<div id="MainContent">
<div class="page-content">
    <h1>PhotoSwipe</h1>
</div>
    <iframe id="foo" src="list.html"></iframe>
...