个人中心
gpt4 book ai didi

jquery - AJAX 加载页面中的 Fancybox 'iframe'

转载 作者：行者123 更新时间：2023-11-28 00:21:11 25 4
gpt4 key购买 nike

我已经看到一些与我的问题类似的帖子，但还没有一个帮助我解决问题。

我有一个带有 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 日更新，这是我现在正在尝试但仍然失败的方法(请帮忙!):

<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 调用时 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>

关于jquery - AJAX 加载页面中的 Fancybox 'iframe'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8762058/

25 4 0
文章推荐： javascript - 使用jquery动态获取property_id
文章推荐： javascript - 如何在我的模板中设置谷歌地图？
文章推荐： php - 从 Gmaps 中获取草地、街道、水等信息
文章推荐： html - 最小化页面时如何在CSS中修复菜单栏和容器
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com