2
我見過一些類似的帖子來解決我的問題，但沒有幫助我解決它。在AJAX加載頁面Fancybox的'iframe'
我有一個index.php的AJAX jQuery用戶界面菜單調用通過AJAX點擊時帶入.html文件。
在.html文件中（4）我試圖通過iFrame技術使用一個fancybox。在初始主頁上點擊（通過第一個.html顯示）後，fancybox可以正常工作。但是當你點擊另一個加載另一個.html頁面的菜單按鈕時，fancybox不起作用。當您回到初始頁面加載時工作的主頁後，它不會再工作。
我試過通過移動所有的jQuery庫調用和相關的CSS和內聯JS到主index.php頁面，該網站然後打破調試。然後，我嘗試在那裏加載庫，並試圖在每個單獨的AJAX中調用.html中的內聯JS。然後嘗試了幾種這些類型的調試，但仍然沒有任何變化。
有誰知道我可以通過iFrame在AJAX加載頁面中使用fancybox？
！ UPDATE 1月9日，這裏就是我想現在&仍然失敗（請幫助！）：
<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>
您有活動鏈接供我們玩嗎？當您在AJAX的新頁面中加載時，是要替換整個文檔（頭部和正文），正文還是僅替換相應的內容？ – 2012-01-12 10:41:47