javascript - Jquery，<a> 元素上的每个函数中的 url 保持不变(UserScript)

Question

所以我有这个问题，我无法从用户脚本中使用ajax获取页面的html代码，因为页面在其他所有内容之前仅加载页面的一小部分，因此从用户脚本执行ajax以获取整个页面html是不可能的。所以我使用了一个不可见的 i 框架来绕过这个问题。而且效果很好。但我的网址始终保持不变，我不知道为什么，我正在做 .each()某些功能<a>元素，但出了点问题。

我想要做的是使用放大的弹出库并在弹出窗口中打开图像。基本上这部分可以工作，但是图像的 url 不会改变，所以无论我单击哪个图像，它总是相同的图像。

这是我的代码

var link = '';
var link2 = '';

var iFrame = $('<iframe id="tempData" style ="display: none">').appendTo('body');

$("head").append('<link rel="stylesheet" href = "https://49535f300cc62ae84be0bc4341ad834057099639.googledrive.com/host/0B7xSofmydrHqMU9pRDJXTEtpQWc">');

     $(document).ready(function() {
         $('section[class="article"]').find("#intelliTXT").find('a').each(function(){ 
            var that = $(this);
             if (that.find('img').attr('src') != undefined){
                 iFrame.attr('src',that.attr('href'));
                 iFrame.load(function(){
                     link = iFrame.contents().find('.big').find('img').attr('src');
                     that.magnificPopup({
                         items: {
                             src: link
                         },
                         type: 'image',
                         closeOnContentClick: true,
                         mainClass: 'mfp-img-mobile',
                         image: {
                             verticalFit: true
                         }
                     });
                 });
             }
         });
     }); 

不知怎么的 link我点击的每个图像上的变量保持不变。我不知道为什么。请问有什么帮助吗？

link2主页上的网址是我必须访问才能找到要在弹出窗口中显示的实际图像的网址。 link是必须在弹出窗口中显示的图像的 url。而且它也是始终保持不变的链接。它始终是页面的最后一个图像。

我发出警报，检查 link2 变量是否发生变化，并且它正在变化，因此每次 iframe 加载完成时我都应该得到一个新链接，但在 magnificPopup 函数中，链接始终保持不变

HTML

<a href="/image/senran-kagura-estival-versus-2015-07-13-15-005-811425-264284" title="Senran Kagura Estival Versus 2015 07 13 15 005" class="zoomLink"><img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-005_00CE007400811425.jpg" alt="Senran Kagura Estival Versus 2015 07 13 15 005" width="206" height="116"></a>

那在主页上，还有一些其他链接。里面的img只是截图。中的href是实际大尺寸图片所在的第二页的链接。

<section id="zoom" class="galerie">
                    <nav class="smalls clearfix">
                                    <a href="/image/senran-kagura-estival-versus-2015-07-13-15-001-811421-264284" class="small">
                        <img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-001_00DC007C00811421.jpg" alt="Senran-Kagura-Estival-Versus_2015_07-13-15_001">
                    </a>
                                    <a href="/image/senran-kagura-estival-versus-2015-07-13-15-007-811427-264284" class="small">
                        <img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-007_00DC007C00811427.jpg" alt="Senran-Kagura-Estival-Versus_2015_07-13-15_007">
                    </a>
                                <a href="/image/senran-kagura-estival-versus-2015-07-13-15-005-811425-264284" class="small active">
                    <img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-005_00DC007C00811425.jpg" alt="Senran-Kagura-Estival-Versus_2015_07-13-15_005">
                </a>
                                    <a href="/image/senran-kagura-estival-versus-2015-07-13-15-004-811424-264284" class="small">
                        <img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-004_00DC007C00811424.jpg" alt="Senran-Kagura-Estival-Versus_2015_07-13-15_004">
                    </a>
                                    <a href="/image/senran-kagura-estival-versus-2015-07-13-15-003-811423-264284" class="small">
                        <img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-003_00DC007C00811423.jpg" alt="Senran-Kagura-Estival-Versus_2015_07-13-15_003">
                    </a>
                            </nav>
        
        <div class="zoom">
                        <span class="big"><img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-005_0903D4000000811425.jpg" alt="Senran-Kagura-Estival-Versus_2015_07-13-15_005"></span>

                                                <a href="/image/senran-kagura-estival-versus-2015-07-13-15-007-811427-264284" class="nav prev" data-icon=""></a>
                                                    <a href="/image/senran-kagura-estival-versus-2015-07-13-15-004-811424-264284" class="nav next" data-icon=""></a>
                            
            <header>
                <h1 class="titre">Senran-Kagura-Estival-Versus_2015_07-13-15_005</h1>
            </header>
        </div>

                    <div class="bup">    <script type="text/javascript">tmntag.adTag('side_ad');</script>
</div>
        
        <a class="btn" data-icon="" href="/actualites/senran-kagura-estival-versus-premieres-images-ayame-combattante-264284-1">Retour au contenu</a>

    </section>

这是第二页。 .big 类中的图像是我在主页上单击的图像，它具有实际大小。这个 .big 类的 img 元素内的链接是我必须使用的链接。所有其他图像只是一些其他图像的小屏幕截图，我不必使用它们。

解决方案

好吧，最后我设法让它工作，只需为每个链接创建一个不同的 iframe。

var iFrameContainer = $('<div id="iFrameContainer" style = "display: none">').appendTo('body');

然后在每个函数中附加一个新的 iframe

 var iFrame = $('<iFrame>').appendTo(iFrameContainer);

Answer 1

link = iFrame.contents().find('.big').find('img').attr('src');

看起来您正在向每个迭代链接添加相同的网址。尝试迭代图像。