Question

我希望通过另一个HTML页面（例如＆＃34; page2.html＆＃34;）显示非常大的HTML页面的特定部分（例如，＆＃34; page1.html＆＃34;）包含指向page1.html的每个部分的链接。如何使用简单的javascript，jquery等实现这一点.page1.html实际上是通过splunk呈现的，page2.html是一个普通的html页面，其中包含指向page1.html各个部分的链接。这可以实现吗？

抱歉，由于我的声誉低于10，我们无法提供照片。

让我澄清一下。不同服务器上有一系列应用程序（超过100个）。每个应用程序都包含一个类似page1.html的母版页。在page2.html中有一个搜索框，我输入或选择我要查看其统计信息的应用程序。这些部分是指我想要查看的特定统计数据，假设我只想查看应用程序运行的服务器统计信息，然后我将点击链接或按钮（在page2.html上），它将带我到主要部分页面（即page1.html），其中显示相关信息。同样，如果我想查看应用程序统计信息，我将点击链接或按钮（在page2.html上），它将带我到显示应用程序统计信息的母版页的那一部分。

以下是page2.html的代码：

<body class="simplexml preload locale-en">

<a class="navSkip" href="#navSkip" tabindex="1">Screen reader users, click here to skip the navigation bar</a>
<div class="header splunk-header">
    <div id="placeholder-splunk-bar">
        <a href="{{SPLUNKWEB_URL_PREFIX}}/app/launcher/home" class="brand" title="splunk &gt; listen to your data">splunk<strong>&gt;</strong></a>
    </div>
        <div id="placeholder-app-bar"></div>
</div>
<a id="navSkip"></a>
<div class="dashboard-body container-fluid main-section-body" data-role="main">
<div class="dashboard-header clearfix">
    <h2>Application Dashboard HTML</h2>
</div>
<div class="fieldset">
    <div class="input input-text" id="input1">
        <label>Application</label>
    </div>
</div>


<div id="row1" class="dashboard-row dashboard-row1">
    <div id="panel1" class="dashboard-cell" style="width: 100%;">
        <div class="dashboard-panel clearfix">

            <div class="panel-element-row">
                <div id="element1" class="dashboard-element html" style="width: 100%">
                    <div class="panel-body html">
                            <center><h1 class="golden_gradient">$tok_application$ Application Status Dashboard</h1></center>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="row2" class="dashboard-row dashboard-row2">
    <div id="panel2" class="dashboard-cell" style="width: 100%;">
        <div class="dashboard-panel clearfix">

            <div class="panel-element-row">
                <div id="element2" class="dashboard-element html" style="width: 100%">
                    <div class="panel-body html">
                            <table cellspacing="5" cellpadding="5" border="0" width="100%">
                                <tr>
                                    <td width="50%">
                                        <pre><a style="text-decoration: none" onclick="loadURL()"><font size="4"><p align="center"><b>Website Availability</b></p></font></a></pre>
                                    </td>
                                    <td width="50%">
                                        <pre><a style="text-decoration: none" onclick="loadDBStat()"><font size="4"><p align="center"><b>Database Availability</b></p></font></a></pre>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="50%">
                                        <pre><a style="text-decoration: none" onclick="loadBM()"><font size="4"><p align="center"><b>Batch Jobs</b></p></font></a></pre>
                                    </td>
                                    <td width="50%">
                                        <pre><a style="text-decoration: none" onclick="loadIT()"><font size="4"><p align="center"><b>Infrastructure Dashboard</b></p></font></a></pre>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="50%">
                                        <pre><a style="text-decoration: none" onclick="loadBusiness()"><font size="4"><p align="center"><b>Business Dashboard</b></p></font></a></pre>
                                    </td>
                                    <td width="50%">
                                        <pre><a style="text-decoration: none" onclick="loadCMRegression()"><font size="4"><p align="center"><b>Capacity Management Regression</b></p></font></a></pre>
                                    </td>
                                </tr>
                            </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="content"></div>
</div>
</body>

我希望母版页的部分打印在

中

<div id="content"></div>

我也是新手，所以请提供一些详细的解释。提前谢谢。

Answer 1

http://www.w3schools.com/html/html_iframe.asp有一个使用iframe显示网络链接的方法。

<iframe width="100%" height="300px" src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

<p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p>

[来自w3scools.com的代码]

在另一个HTML页面中显示HTML页面的一部分

1 个答案: