Question

我是一个单页网站，使用一个顶部导航栏进行导航。单击链接后，页面将滚动到单击的部分。

现在我有一个部分，需要一个iFrame（外部）但是如果单击一个链接，这个iFrame总会重新加载整个页面，这使得它无法有效地使用iFrame（也是一个自托管的iFrame这样做）。

现在我的问题是：如果在iFrame中点击了链接，是否可以不刷新整个页面？我只是想让iFrame导航到该链接，而无需重新加载整个页面。

我面临的问题是，在链接点击后，页面会重新加载，因此会滚动到页面顶部，而iFrame位于页面的3/5上。代码：

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<title>Site Title</title>

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">

<!-- Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/animate.css" rel="stylesheet" />
<!--CSS -->
<link href="css/style.css" rel="stylesheet">
<link href="color/default.css" rel="stylesheet">

<script src="js/jquery.min.js"></script>

该部分的代码：

<section id="occasions" class="home-section text-center bg-gray">

    <div class="heading-about">
        <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2">
                <div class="wow bounceInDown" data-wow-delay="0.4s">
                <div class="section-heading">
                <h2>Header H2</h2>
                <h5>Header H5</h5>
                <i class="fa fa-2x fa-angle-down"></i>

                </div>
                </div>
            </div>
        </div>
        </div>
    </div>
    <div class="container">
    <div class="row">
        <div class="col-lg-2 col-lg-offset-5">
            <hr class="marginbot-50">
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="wow fadeInLeft" data-wow-delay="0.2s">
                <div class="occasionframe">
                    <iframe id="voorraadFrame" class="embed-responsive-item" style="width: 100%; margin-right:-10px;" frameborder="0" onload="scroll(0,0);" src="http://www.voorraadmodule.nl/86c0/"></iframe>
                </div>
    </div>      
    </div>

    <div class="page-scroll">
        <a href="#service" class="btn btn-circleblue">
            <i class="fa fa-angle-double-down animated"></i>
        </a>
    </div>
</section>

和javascript libs：

<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.min.js"></script> 
<script src="js/jquery.scrollTo.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/custom.js"></script>

custom.js：

(function ($) {

new WOW().init();

jQuery(window).load(function() { 
    jQuery("#preloader").delay(100).fadeOut("slow");
    jQuery("#load").delay(100).fadeOut("slow");
});


//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
    if ($(".navbar").offset().top > 60) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
        $(".active").focusout();
    } else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }
});

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('.navbar-nav li a').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
    $('.page-scroll a').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

})(jQuery);

提前致谢！

编辑： onload =＆＃34;滚动（0,0）;＆＃34;问题是......

IFrame重新加载父（整页）

0 个答案: