在另一个 HTML 页面中显示 HTML 页面的一部分
Displaying a section of a HTML page in another HTML page
我想通过另一个 HTML 页面(比如 "page2.html")显示非常大的 HTML 页面(比如 "page1.html")的特定部分,这将将 link 包含到 page1.html 的每个部分。我如何使用简单的 javascript、jquery 等实现此目的。page1.html 实际上是通过 splunk 呈现的,而 page2.html 是一个普通的 html 页面,其中包含 links 到 page1.html 的各个部分。这能实现吗?
抱歉,我的声誉低于 10,无法提供图片。
让我澄清一下。不同服务器上有一系列应用程序(超过 100 个)。每个应用程序都包含一个母版页,如 page1.html。 page2.html 中有一个搜索框,我可以在其中输入或 select 我想查看其统计信息的应用程序。
这些部分指的是我想查看的特定统计信息,假设我只想查看应用程序 运行 所在的服务器统计信息,那么我将单击 link 或按钮(在 page2.html 上)这将带我到显示相关信息的母版页部分(即 page1.html)。同样,如果我想查看应用程序统计信息,我将单击 link 或按钮(在 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 > listen to your data">splunk<strong>></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>
我也是新手,请详细说明一下。提前致谢。
http://www.w3schools.com/html/html_iframe.asp 有一种方法使用 iframe 显示网页 link。
<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 页面(比如 "page2.html")显示非常大的 HTML 页面(比如 "page1.html")的特定部分,这将将 link 包含到 page1.html 的每个部分。我如何使用简单的 javascript、jquery 等实现此目的。page1.html 实际上是通过 splunk 呈现的,而 page2.html 是一个普通的 html 页面,其中包含 links 到 page1.html 的各个部分。这能实现吗?
抱歉,我的声誉低于 10,无法提供图片。
让我澄清一下。不同服务器上有一系列应用程序(超过 100 个)。每个应用程序都包含一个母版页,如 page1.html。 page2.html 中有一个搜索框,我可以在其中输入或 select 我想查看其统计信息的应用程序。 这些部分指的是我想查看的特定统计信息,假设我只想查看应用程序 运行 所在的服务器统计信息,那么我将单击 link 或按钮(在 page2.html 上)这将带我到显示相关信息的母版页部分(即 page1.html)。同样,如果我想查看应用程序统计信息,我将单击 link 或按钮(在 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 > listen to your data">splunk<strong>></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>
我也是新手,请详细说明一下。提前致谢。
http://www.w3schools.com/html/html_iframe.asp 有一种方法使用 iframe 显示网页 link。
<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]