JQuery在iframe中加载动态页面 [英] JQuery load dynamic page in iframe

问题描述

我想通过导航菜单将动态页面加载到iframe中，如果我选择菜单选项常见问题，iframe将位于 faq.php 页面到 src 属性，依此类推。

I want to load dynamic page into an iframe through navigation menus, if I choose menu option FAQ, iframe will located faq.php page to src attribute, and so on.

我怎样才能动态地将菜单页面分配到下面？

How could I dynamically assign menu's page into below?

Jquery：

<script type="text/javascript">
$(document).ready(function() {
    $("#mainFrame").attr("src", "faq.php");
});
</script>


<div class="content">
    <div class="left">
        <ul id="menu">
            <li><a href="#">Banking</a></li>
            <li><a href="#">How To Join</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Help</a>
                <ul>
                    <li><a href="#">Subscribe</a></li>
                    <li><a href="#">Recipe</a></li>
                </ul>
            </li>
            <li><a 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>
</div>

请指教，谢谢。

推荐答案

我建议您为所有链接使用一个类，并使用数据属性传递要在iframe中加载的文件的名称：

I would suggest you using a class for all you link as well as passing the name of the file you want to load in the iframe using data attribute:

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

然后你可以使用jQuery动态加载iframe的内容：

Then you can use jQuery to load the content of the iframe dynamically using:

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

工作演示

这篇关于JQuery在iframe中加载动态页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！