<a>单击</a> href标记后，整个页面将加载到iframe中

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. 每当我单击html响应中存在的href标签时，就会加载整个页面（包括iframe），因此它会在iframe中创建类似结构的堆栈。

Answer 1

you can try like this 你可以这样尝试

<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>

hope will help you thankx 希望对你有帮助

solution 2 解决方案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

You should be replacing everything inside the #content_div with httpResponse, not appending to it. 您应该使用httpResponse 替换 #content_div中的所有内容，而不要附加到其后。 Try replacing your iframe jQuery line with this: 尝试用以下代码替换您的iframe jQuery行：

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

Appending to #data_div, which already contains <html><body></body></html> , is causing it to nest, like: 附加到已经包含<html><body></body></html> #data_div导致其嵌套，例如：

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

You can test this on JSFiddle 您可以在JSFiddle上进行测试

<a>单击</a> href标记后，整个页面将加载到iframe中

问题描述

2 个解决方案

解决方案1
0 2016-01-04 12:45:56

解决方案2
0 2016-01-04 13:03:01

<a>单击</a> href标记后，整个页面将加载到iframe中

问题描述

2 个解决方案

解决方案1 0 2016-01-04 12:45:56

解决方案2 0 2016-01-04 13:03:01

解决方案1
0 2016-01-04 12:45:56

解决方案2
0 2016-01-04 13:03:01