So i have this problem i couldn't get the html code of page using ajax from a userscript since the page loads only a bit of the page firstly before everything else so performing ajax from a userscript to get the whole page html is impossible. So i used an invisible i frame to bypass the problem. And it works fine. But my url always stays the same and i don't know why, i'm doing a .each() function on some <a> elements but something's wrong.
What i want to do is using the magnific popup library and open images in a popup. Basicly this part works but the url of the image doesn't change so no matter what image i click it's always the same image.
Here's my code
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
}
});
});
}
});
});
And somehow the link variable stays the same on every image i click. I don't know why. Any help please?
link2 is the url on the main page the one i have to access to find the actual image to show in the popup.
linkis the url of the image that has to be shown in the popup. And it's also the link that always stays the same. And it's always the last image of the page.
I made and alert to check if the link2 variable changes and it is changing so i should get a new link everytime the iframe is done loading but in magnificPopup function the link stays always the same
<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>
That's on the main page, there's some other link too. The img inside the is only a screenshot. The href in is the link to the second page where the image with the actual big size is located.
<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>
This is on the second page. The image inside .big class is the image i clicked on the main page and it has it's real size. The link inside the img element of this .big class is the link i have to use. All the other images are only small screenshots of some other images i don't have to use them.
Well, finally i managed to make it work, just create a different iframe for each link.
var iFrameContainer = $('<div id="iFrameContainer" style = "display: none">').appendTo('body');
and then just append a new iframe to it in the each function
var iFrame = $('<iFrame>').appendTo(iFrameContainer);
答案 0 :(得分：0)
您可以尝试使用onload
iFrame.on('load', function() {
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
}
});
});
});