2015-07-20 98 views
-1

我想通過另一個HTML頁面(比如說「page2.html」)顯示一個非常大的HTML頁面的特定部分(比如「page1.html」),它將包含page1.html每個部分的鏈接。我怎樣才能實現這個使用簡單的JavaScript,jQuery等page1.html實際上是通過splunk渲染和page2.html是一個正常的HTML頁面,有各種部分page1.html的鏈接。這可以實現嗎?在另一個HTML頁面中顯示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> 

而且我是新手,所以請您提供一點細節的解釋。提前致謝。

+0

如果你想有一個很好的答案,你必須先學會[如何提問](http://stackoverflow.com/help/on-topic)的適當的問題 – musefan

+0

你可以截圖page1.html並將其放在page2.html上嗎? –

+0

或從page1.html中複製html代碼,然後將其添加到page2.html,我不太確定您的需求。 –

回答

2

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採取代碼]

+0

非常感謝MrEhawk82 + 1投票 –

相關問題