Javascript 如何在另一个html页面div中显示html页面而不使用jQuery和ajax调用_Javascript_Html

Javascript 如何在另一个html页面div中显示html页面而不使用jQuery和ajax调用

javascript html

Javascript 如何在另一个html页面div中显示html页面而不使用jQuery和ajax调用,javascript,html,Javascript,Html,我有两个html页面，如果单击第一页中的图像，它将转到第二个html页面。如果我点击第二个html页面，它会返回到第一个页面，并在第一个页面div中显示第二个页面第一个html页面 <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Insert titl

我有两个html页面，如果单击第一页中的图像，它将转到第二个html页面。如果我点击第二个html页面，它会返回到第一个页面，并在第一个页面div中显示第二个页面

第一个html页面

    <!DOCTYPE html>
            <html>
            <head>
            <meta charset="ISO-8859-1">
            <title>Insert title here</title>
            <link rel="stylesheet" href="../css/styles.css" type="text/css" />
            <script type="text/javascript" src="../js/scripts.js"></script>
            <script type="text/javascript" src="../js/jquery-2.0.3.min.js"></script>
            <script type="text/javascript" src="../js/common.js"></script>

            </head>
            <body class="wt-bg" onload="initPr()">
                <table class="header">
                    <tr>
                        <td id="branding2">
                            <div>
                                <img src="images/slogo.png">
                            </div>
                        </td>
                        <td id="header-recent">
                            <div>
                                <a href=""><img class="topbar-icon" alt="Recent" src="images/nav_re.png"></a> <a
                                    href=""><img class="topbar-icon" alt="Gift" src="images/nav_gt.png"></a> <a href=""><img
                                    class="topbar-icon" alt="New" src="images/nav_new.png"></a>
                            </div>
                        </td>
                        <td class="header-uscart">
                            <div>
                                Hello <label id="username"></label> 
                                <a onclick="openH()"><img class="topbar-icon" alt="Home" src="images/nav_ho.png"></a> 
                                <a onclick="openUsDe()"><img class="topbar-icon" alt="Account" src="images/nav_act.png"></a> 
                                <a onclick="openPre()"><img class="topbar-icon" alt="Settings" src="images/nav_pref.png"></a> 
                                <a onclick="openCt()"><img class="topbar-icon" alt="Cart" src="images/nav_shcart.png"></a>
                                <a onclick="openWce()"><img class="topbar-icon" alt="Logout" src="images/nav_custcare.png"></a>
                            </div>


                        </td>
                    </tr>
                </table>

                <table class="main" border="1">
                    <tr>
                        <td class="left-bar top">
                            <div id="left-scroll">
                                <div class="category-title">Category</div>
                                <ul id="cat-list" class="category-list">
                                     <li class="category-title">Category</li>
                                    <li class="category-name"><a onclick="openCategory('toys')" class="no-underline">Kids
                                        toys</a></li>
                                    <li class="category-name"><a onclick="openCategory('mobile')" class="no-underline">Mobile</a></li>
                                    <li class="category-name"><a onclick="openCategory('tv')" class="no-underline">Television</a></li>
                                    <li class="category-name"><a onclick="openCategory('clothing')" class="no-underline">Clothing</a></li>
                                    <li class="category-name"><a onclick="openCategory('watches')" class="no-underline">Watches</a></li> 
                                </ul>
                            </div>
                        </td>
                        <td class="top">
                            <div id="item-content">
                                <div class="div-home">
                                    <marquee scrollamount="2">
                                        <div class="home-subtitle">Favorite Brand Store&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                                            Favorite Brand Store&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                                            Favorite Brand Store&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        </div>
                                    </marquee>
                                    <div class="hscrollview">
                                        <img class="small-icon" src="images/le_small.png" onclick="openItem()">
                                        <img class="small-icon" src="images/sams_small.png">
                                        <img class="small-icon" src="images/gucci_small.png">
                                        <img class="small-icon" src="images/se_small.png">
                                        <img class="small-icon" src="images/dis_small.png">
                                        <img class="small-icon" src="images/leo_small.png">
                                    </div>
                                </div>
                                <div class="div-home">
                                    <marquee scrollamount="2">
                                        <div class="home-subtitle">Offers &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                                            Offers&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                                        </div>
                                    </marquee>
                                    <div class="hscrollview">
                                        <div class="excl-offer">
                                            RemoteControlled Toys<br>
                                            <img class="small-icon" src="images/nav_side_ad2.png"> 
                                        </div>
                                        <div class="excl-offer">
                                            Trousers<br>
                                            <img class="small-icon" src="images/nav_side_ad4.png"> 
                                        </div>
                                        <div class="excl-offer">
                                            Watches<br>
                                            <img class="small-icon" src="images/nav_side_ad1.png">
                                        </div>
                                        <div class="excl-offer">
                                            Phones<br>
                                            <img class="small-icon" src="images/nav_side_ad5.png">
                                        </div>

                                    </div>
                                </div>

                            </div>
                        </td>
                        <td class="right-bar left-border top">
                            <div id="right-scroll">
                                <ul style="list-style-type: none; padding-left: 0px">
                                    <li><img class="small-icon" src="images/naspeoffer.png">
                                    <li><img class="small-icon" src="images/ntoy.png">
                                    <li><img class="small-icon" src="images/mob.png">
                                    <li><img class="small-icon" src="images/tel.png">
                                    <li><img class="small-icon" src="images/clot.png">
                                    <li><img class="small-icon" src="images/wat.png">
                                </ul>
                            </div>
                        </td>
                    </tr>
                </table>

                <div id="product-details">
                    <div style="display: table-row;">
                        <div class="inline-block">
                            <img id="product_image" src="" width="150px" height="150px">
                        </div>
                        <div class="inline-block top" style="height: 150px; border: 1px solid green;">
                            <input type="hidden" id="pid" value="0"> <label id="product_name" class="bold font4"></label><br>
                            <label id="product_desc"></label><br> <label id="product_cost"></label>
                            <button class="roundbutton no-border button-font" onclick="adToCa(1)">BUY</button>
                        </div>

                        <table class="match-parent">
                            <tr>
                                <td class="left">
                                    <button class="roundbutton no-border button-font" onclick="opHome()">Continue
                                        Shopping</button>
                                </td>
                                <td class="right">
                                    <button class="roundbutton no-border button-font" onclick="adToCa(0)">Add to
                                        Shopping Cart</button>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </body>
            </html>

但我没有得到第二页的div。如果我将其添加到var项中，

将不起作用

为什么会这样？

您可以使用“做您想做的事”：

将其放在第一页，并根据需要显示或隐藏

<iframe src='secondpage.html'></iframe>

使用onclick for html元素并调用javascript函数重定向特定页面。
第1页：
`
函数MyFunction（）{
window.location=“/HtmlPage2.aspx”；
}
第1页
第2页：
函数MyFunction（）{
window.location=“HtmlPage1.aspx”；
}
第2页
`

发布您的代码…展示您所做的…更好地构建它，否则您将拥有两个和两个基于标题我会说

iframe

，基于内容我会说什么？在第二

html

页面上，将其链接回第一页！？：/向我们展示你的代码肯定会有帮助！如果没有代码，您将无法在这里完成很多工作。你想干什么？

<img class="small-icon" src="images/le_small.png" **onclick="openItem()">

openItemInFirstPage = function(){
            SysJump.go("shop_home.html");
            $('#item-content').empty();
    var brand = 'aaa';
    var gender = 'women';

            var levisitem = '<div id="initial-div" class="full-banner"> ' 
                        + '<div class="Item-header"> '
                        + ' <img src="images/aa.png" style="margin-right: 50px;"> '
                        + ' <label class="item-link1" onclick="showItemByGen('bbb','men')">Men</label> '
                        + ' <label class="item-link1" 'onclick="showItemByGen('ccc','women')">Women</label> '
                        + ' <label class="item-link1" onclick="showItemByGen('ddd','shoe')">Shoes</label> '     
                        + '</div> '

                        + '<div id="item-content"> '
                        + '<img id="image-current" src="images/item1.png"  onclick="openItemInFirstPage()"
                            style="max-width: 100%; max-height: 100%; margin: auto; display: block;> '
                            + ' <div id="ITemTouch"> '
                            + ' <div id="images"> '
                            + ' <img src="images/itemimg1.png"> '
                            + ' <img src="images/itemimg2.png"> ' 
                            + ' <img src="images/itemimg3.png"> '
                            + ' </div> '
                            + ' </div> '
                      + ' </div> '
               + ' </div>'
            alert(item);
            $('#item-content').append(item);
}

<iframe src='secondpage.html'></iframe>

Use onclick for html element and call a javascript function to redirect the specific page.

Page1:

`<html xmlns="http://www.w3.org/1999/xhtml" onclick="MyFunction()">
<head>
    <title></title>
    <script>

        function MyFunction() {
            window.location = "/HtmlPage2.aspx";
        }
    </script>
</head>
<body>
    Page1
</body>
</html>

Page2:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" onclick="MyFunction()">
<head>
    <title></title>
    <script>

        function MyFunction() {
            window.location = "HtmlPage1.aspx";
        }
    </script>
</head>
<body>

Page2

</body>
</html>`