gpt4 book ai didi

jQuery iframe 和灯箱效果

转载 作者:行者123 更新时间:2023-12-01 06:04:16 24 4
gpt4 key购买 nike

我在同一个域的 iframe 中保存了许多图像,但我希望能够对图像应用单击功能,以便当单击它时,它会从 iframe 中弹出并进入父正文。

理想情况下,我不想将 jQuery 插入 iframe 主体中,只需将其存在于父主体中即可。

有人能想到我该怎么做吗?

最佳答案

试试这个:

<!--We'll be selecting our images from this frame-->
<iframe id="img_from" src="path/to/same_origin_script.html"></iframe>
<!--We'll be placing the image from the above frame here when the user clicks on it-->
<span id="img_to"></span>
<script type="text/javascript">
window.onload = function()
{
//The iframe document
var f = document.getElementById('img_from').contentWindow.document;
//Register and add event listeners for each image in the iframe... You might want to narrow this down by using class name instead.
for (var i=0; i<f.getElementsByTagName('img').length; i++)
{
//To ensure that event listener is assigned appropriately
(function(i)
{
//Register an image from the iframe.
var img = f.getElementsByTagName('img').item(i);
//Add onclick event listener to the image that pulls it from the iframe and puts it in the parent document
img.onclick = function()
{
//Create a new image element
var newImg = document.createElement('img');
//Give the new image a meaningful id
newImg.id = 'img_to-'+i;
//Assign source of clicked image to new image. You may want to use absolute linking in your iframe to avoid bad source links in the parent document.
newImg.src = img.src;
//Add the new image to the #image_to span in the parent document
document.getElementById('img_to').appendChild(newImg);
//Optional: remove the image from the iframe's DOM
img.parentNode.removeChild(img);
//Just in case the image is wrapped in a link, return false to avoid jumping to the href.
return false;
}
//Still making sure i behaves as expected...
}) (i);
}
}
</script>

iframe 文档中不需要任何脚本,使用 jQuery 的 $(selector).each() 功能绝对可以提高效率。希望这有帮助!

关于jQuery iframe 和灯箱效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8142549/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com