Fancybox - 单击 iframe 上的链接，更新 URL 地址
Posted
技术标签:
【中文标题】Fancybox - 单击 iframe 上的链接，更新 URL 地址【英文标题】：Fancybox - Clicking a link on iframe, updates URL address 【发布时间】：2014-11-24 04:05:07 【问题描述】：现在我有一个 iFrame 内容正在使用 fancybox 打开。当它打开时，它会更新 URL 地址以匹配 iFrame URL。当它关闭时，它将返回到以前的 URL。问题是在 iFrame 内部，我有导航键可以在帖子之间切换。这样做不会像关闭和打开一样更新 URL 地址。有什么办法可以实现吗？
代码是：
JS
$(".caption a").fancybox(
type: 'iframe',
width : '1470px',
height : '1800px',
transitionIn : 'fade',
transitionOut : 'fade',
autoScale: false,
autoDimensions: false,
autoSize : false,
arrows : false,
nextClick : false,
padding : 0,
beforeShow: function ()
$.cookie('window_location', window.location, path: '/' );
window.history.pushState("string", "Title", $(this).attr('href'));
,
afterClose: function()
window.history.pushState("string", "Title", $.cookie('window_location'));
$.removeCookie('window_location', path: '/' );
);
HTML
<div class="caption">
<a href="<?php the_permalink(); ?>"></a>
</div>
编辑：
我已经创建了一个当前正在发生的事情的工作示例。 http://josemelo.net/testing/
如您所见，当您点击打开 iframe 时，它会使用您正在 iframe 构建的页面（在本例中为 iframe.html）更新浏览器的 URL。但是，如果您导航到 iframe 内的 page2，则 URL 不会更新。我要更新！所以基本上这里的目标是，每当您导航到 iframe 内的其他页面时，它都会不断更新 URL。
在http://josemelo.net/testing/里面我有一个名为index.html的文件：
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="fancybox.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="fancybox-2.1.5.js"></script>
<script src="cookie-1.4.0.js"></script>
<script>
$(document).ready(function()
$(".fancybox").fancybox(
type: 'iframe',
width : '800px',
height : '600px',
transitionIn : 'fade',
transitionOut : 'fade',
autoScale: false,
autoDimensions: false,
autoSize : false,
arrows : false,
nextClick : false,
padding : 0,
helpers: overlay: locked: false ,
beforeShow: function ()
$.cookie('window_location', window.location, path: '/' );
window.history.pushState("string", "Title", $(this).attr('href'));
,
afterClose: function()
window.history.pushState("string", "Title", $.cookie('window_location'));
$.removeCookie('window_location', path: '/' );
);
);
</script>
</head>
<body>
<a href="iframe.html" class="fancybox">Click to open iframe</a>
</body>
</html>
另一个名为 iframe.html：
<!DOCTYPE html>
<head>
</head>
<body>
<a href="page2.html">Click to go to page 2</a>
</body>
</html>
另一个名为page2.html：
<!DOCTYPE html>
<head>
</head>
<body>
This is page 2! Wanna go back? <a href="iframe.html">Click here</a>
</body>
</html>
并链接到 fancybox js 和 css 以及 jQuery 的 cookie js。你可以在http://josemelo.net/testing/testing.zip下载整个包
【问题讨论】：
我读了 3 次你的问题，但我不太确定你在问什么？ iframe 内容是否与打开页面属于同一域？ 是的。问题是，假设您正在打开一个花式框 iframe。在 iframe 中，您将浏览页面（在同一域中），即使您在 fancybox 中查看页面，URL 也会更改为这些特定页面地址。你明白吗？在我上面的代码中，每次打开fancybox 时，它都会将URL 地址更改为页面之一，即使您是通过fancybox 查看它。我想要相同的，但是在 iframe 本身内更改页面时。 对不起，但不是。尽管您导航到 iframe 内的其他页面 jsfiddle.net/hy9qe8hp，但 iframe 的 URL 永远不会改变 【参考方案1】：如果每个人都遇到这个问题，我已经找到了一种方法来解决这个问题并让它发挥作用。基本上，您需要在每个 iframe 页面（或者在本例中为第一个）上做的就是：
<!DOCTYPE html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$("document").ready(function()
$("a.lala").click(function()
var cenas = $(this).attr('href');
window.top.history.pushState("string", "Title", cenas);
);
);
</script>
</head>
<body>
<a href="page2.html" class="lala">Click to go to page 2</a>
</body>
</html>
这基本上会将父级的 URL 更新为链接 href 中的值。
$("a.lala").click(function()
当用户点击下面的链接时，带有“lala”类。
var cenas = $(this).attr('href');创建一个名为“cenas”的变量来检索链接的href=""中的内容
window.top.history.pushState("string", "Title", cenas); 使用 var "cenas" 更新父级的 URL，即 href。
大家干杯。
【讨论】：
以上是关于Fancybox - 单击 iframe 上的链接，更新 URL 地址的主要内容，如果未能解决你的问题，请参考以下文章
您如何在 fancybox V2 中为 iframe 设置不同的高度/宽度？