Question

 <body> 
      <div id='datadiv'>    </div>
      <script>

                 var htmlResponse="<html><head><h2> Checking iframe scenario</h2><h1>       INDEX </h1><p><a href=\"#First\"> First </a> </p><p><a href=\"#Second\"> Second </a> </p>   <p><a href=\"#Third\"> Third </a></p>   </head> <body>  </body></html>";        

            $(document).ready(function(){           

        $('<iframe     id="checkOther"/>').appendTo('#datadiv').contents().find('body').append(htmlResponse);   
    });     
     </script>
</body>

Whenever I click on any of the href tag present inside the html Response the whole page (including iframe) gets loaded so it creates a stack like structure inside iframe.

Answer 1

你可以这样尝试

<script lang='javascript'>
        $(document).ready(function(){
            $('.ajaxload').click(function(){
                $('#content_div').load($(this).attr('id')+'.html');
            });
        });
</script>

<nav>
    <ul>
       <li><a class='ajaxload' href="javascript:void(0)" id='page1'>Page 1</a></li>
       <li><a class='ajaxload' href="javascript:void(0)" id='page2'>Page 2</a></li>
       <li><a class='ajaxload' href="javascript:void(0)" id='page3'>Page 3</a></li>
       <li><a href='#page4_content'>Page 4</a></li>
    </ul>
</nav>

<div id='content_div'>
    <!--Here your content gets loaded-->
</div>
<div id='page4_content'>
    <!--Page 4 content here-->
</div>

希望能帮到你谢谢

解决方案2

<div class="left">
            <ul id="menu">
<li><a class="anchor" data-url="banking.php" href="#">Banking</a></li>
<li><a class="anchor" data-url="join.php" href="#">How To Join</a></li>
<li><a class="anchor" data-url="faq.php" href="#">FAQ</a></li>
<li><a class="anchor" data-url="about.php" href="#">Contact Us</a></li>
<li><a class="anchor" data-url="help.php" href="#">Help</a>
    <ul>
        <li><a class="anchor" data-url="subscribe.php" href="#">Subscribe</a></li>
        <li><a class="anchor" data-url="recipe.php" href="#">Recipe</a></li>
    </ul>
</li>
<li><a class="anchor" data-url="term.php" href="#">Terms &amp; Conditions</a></li>
                </ul>
        </div>
<div class="right">
            <div>Title</div>
            <div><iframe src="" frameborder="0" id="mainFrame" name="mainFrame"></iframe>
    </div>
</div>


$(".anchor").each(function(){
    var el = $(this);
    el.click(function() {
        $("#mainFrame").attr("src", el.data('url'));
    })
})

Answer 2

您应该使用httpResponse 替换 #content_div中的所有内容，而不是附加到它。尝试用以下代码替换iframe jQuery行：

$('<iframe id="checkOther"/>').appendTo('#datadiv').replaceWith(htmlResponse);

附加到已经包含<html><body></body></html>的#data_div会导致它嵌套，例如：

<html>
<body>
    <html>
    <body>
    </body>
    </html>
</body>
</html>

您可以在JSFiddle

上对此进行测试

当href标记<a> is clicked

2 个答案: