我已经看到了一些与我的问题类似的帖子，但没有一个能帮我解决它。
我有一个带有AJAX jQuery UI菜单的index.php，在点击时调用通过AJAX引入的.html文件。
在.html文件中（4）我试图通过iFrame技术使用一个fancybox。一旦点击了初始主页（通过第一个.html显示），fancybox就可以了。但是当你点击菜单上的另一个按钮加载另一个.html页面时，fancybox不起作用。当你导航回到初始页面加载工作的主页时，它不再起作用。
我已经尝试通过将所有jQuery库调用以及相关的CSS和内联JS移动到主index.php页面进行调试，然后该站点崩溃了。然后我尝试在那里加载库并尝试在每个名为.html的AJAX中使用内联JS启动。然后尝试了这些类型的调试的更多变体，但仍然没有。
有没有人知道如何在AJAX加载页面中通过iFrame使用fancybox？
！更新1月9日，这就是我现在正在尝试的＆amp;仍然失败（请帮助！）：
<script type="text/javascript">
$(document).ready(function() {
/*
* Examples - various
*/
$('#various7').load(toLoad,'',showNewContent);
$("#various7").fancybox({
'width' : '95%',
'height' : '95%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>
以下是完整代码-----------
这是我的index.php标记：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>American Grown - in dev</title>
<link rel="stylesheet" type="text/css" href="http://rh-dev.us.mytest.com/crown/features/css/mainstyles.css">
<link rel="stylesheet" href="css/jquery.ui.all.css">
<script src="http://jqueryui.com/jquery-1.6.2.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.tabs.js"></script>
<!--[if lte IE 7]>
<meta http-equiv="refresh" content="0; url=http://rh-dev.us.mytest.com/crown/features/AmericanGrown/indexie.html" />
<script type="text/javascript">
/* <![CDATA[ */
window.top.location = 'http://rh-dev.us.mytest.com/crown/features/AmericanGrown/indexie.html';
/* ]]> */
</script>
<![endif]-->
<script>
$(function() {
$( "#tabs" ).tabs({
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo." );
}
}
});
});
</script>
<style>
<!--Inline Styles to override UI theme-->
h1 { font-family: Georgia, Regular; font-size: 30px; color: #8E4925; }
h2 { font-family: Georgia, Regular; font-size: 20px; color: #000; line-height: 30px;}
p { font-family: Georgia, Regular; font-size: 16px; color: #000; padding: 4px; line-height: 25px;}
p.buyhead { font-family: Georgia, Regular; font-size: 18px; color: #000; padding: 4px; line-height: 25px; font-weight: bold;}
.ui-tabs .ui-tabs-nav {
margin:0;
}
.ui-widget-header {
border:1px solid #AAAAAA;
color:#222222;
font-weight:bold;
}
.ui-tabs .ui-tabs-nav li {
border-bottom:0 none !important;
float:left;
list-style:none outside none;
margin:0 2.2em 1px 0;
padding:0;
position:relative;
white-space:nowrap;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
background:url("select state") repeat-x scroll 50% 50% #FFFFFF;
border:1px solid #AAAAAA;
color:#212121;
font-weight:normal;
}
.ui-tabs .ui-tabs-nav {
margin:0;
padding:0;
}
.ui-widget-header {
background: none;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
border: 0; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
padding-bottom: 0px;
}
.ui-widget-header {
border: 0;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
background: none;
}
.ui-state-default, .ui-state-default, .ui-widget-header .ui-state-default {
background: none;
}
.ui-tabs .ui-tabs-nav li a {
float: left;
padding: 0.5em 1.1em;
}
<!--Using CSS sprites-->
#nav-example, #tabs {
background:url("http://rh-dev.us.mytest.com/crown/features/AmericanGrown/imgs/nav.gif") no-repeat;
width: 760px;
height: 42px;
padding: 0;
padding-top: -2px;
}
#nav-example li, #nav-example a {
height: 41px;
display: block;
width:214px;
}
#nav-example li {
float: left;
list-style: none;
display: inline;
text-indent: -9999em;
}
#nav-example-01 { width: 210px; }
#nav-example-02 { width: 210px; }
#nav-example-03 { width: 210px; }
#nav-example-01 a:hover, a:active { background:url("http://rh-dev.us.mytest.com/crown/features/AmericanGrown/imgs/nav.gif") 0px -50px no-repeat; }
#nav-example-02 a:hover, a:active { background:url("http://rh-dev.us.mytest.com/crown/features/AmericanGrown/imgs/nav.gif") -255px -50px no-repeat; }
#nav-example-03 a:hover, a:active { background:url("http://rh-dev.us.mytest.com/crown/features/AmericanGrown/imgs/nav.gif") -500px -50px no-repeat; }
<!--End Inline Styles to override UI theme-->
</style>
</head>
<body style="background-color: #FFFDEF;">
<div id="pagewrap" style=" background-color: #fff; width:800px; height: 1200px; margin: 0 auto; border-right: 1px solid #cccc99 ;border-left: 1px solid #cccc99;">
<div id="headerbox">
<center><img src="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/imgs/Header.gif" style="padding:40px;" border="0"></center>
</div>
<div class="demo" style="margin-left: 18px; margin-top: -16px;">
<div id="tabs" style="border-top:1px solid #CCCC99; border-bottom: 1px solid #CCCC99; border-right:0px; border-left:0px; height: 48px;">
<ul id="nav-example">
<li id="nav-example-01"><a class="item1" href="ajax/content1.html">About the Book</a></li>
<li id="nav-example-02"><a class="item2" href="ajax/content2.html">Join us on Facebook</a></li>
<li id="nav-example-03"><a class="item3" href="ajax/content3.html">Get email Updates</a></li>
</ul>
<div id="tabs-1">
</div>
</div>
</div>
</div>
</body>
</html>
这是我在每个AJAX .html页面中的初始头附近的代码。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/fancybox/jquery.mousewheel-3.0.4.pack.js">
</script>
<script type="text/javascript" src="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/fancybox/jquery.fancybox-1.3.4.pack.js">
</script>
<link rel="stylesheet" type="text/css" href="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/fancybox/jquery.fancybox-1.3.4.css" media="screen">
<!--JS for Fancybox iFrame buybtn-->
<script type="text/javascript">
$(document).ready(function() {
/*
* Examples - various
*/
$("#various7").fancybox({
'width' : '95%',
'height' : '95%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>
<!--End JS for Fancybox iFrame buybtn-->
并呼吁行动：
<a id="various7" href="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/iframe/buybutton.html" name="various7"><img src="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/imgs/buythebook_btn.png" style="margin-top:-50px;"
" border="0"></a>
答案 0 :(得分：1)
有一个可用的项目fancyboxCallingInsideIframe，可能对您有帮助。
答案 1 :(得分：1)
这是因为在触发ajax调用时fancybox不会启动。
尝试在调用fancybox的“a”标签后移动每个AJAX .html页面中的fancybox代码。
尝试类似的东西。
<a id="various7" href="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/iframe/buybutton.html" name="various7"><img src="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/imgs/buythebook_btn.png" style="margin-top:-50px;" border="0"></a>
<script type="text/javascript">
$(document).ready(function() {
$("#various7").fancybox({
'width' : '95%',
'height' : '95%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>
答案 2 :(得分：0)
当你在Ajax加载的页面上用javascript调用fancybox命令时，问题可能与你成为fancybox的链接有关。
在加载新标签页后，尝试在ajax回调函数上调用.fancybox（）调用吗？
答案 3 :(得分：0)
您需要将事件处理程序绑定到该页面上的当前DOM元素（与js加载到的相同）。如果您将js加载到iframe中，则还需要重新加载javascript。 js设置事件处理程序。如果您在不重新加载js的情况下更改DOM以重新设置该事件处理程序，则不会设置任何一个。
要解决这个问题，你需要将绑定委托给不会在ajax reload上留下DOM的父DOM元素，检查1.7的jQuery .on（）或者＆lt;的.delegate（）。 1.7。
希望这有帮助。