在同一選項卡窗格中單擊選項卡時打開 url 內容

Question

我是 web 開發的初學者。 我正在開發一個小項目，該項目需要在同一選項卡窗格中單擊選項卡時打開一個 url（類似於http://192.168.1.107:8080 ）內容。 提到的 url 是一個客戶端，它連續顯示一些運行時數據（例如：溫度）。

我可以找到一些有關創建選項卡的代碼片段，但我很想使這個特定要求發揮作用。

我將不勝感激有關在同一選項卡窗格中顯示 url 數據的任何代碼片段、鏈接或信息。

很抱歉這個含糊不清的問題，但這就是我可以用文字表達的方式。

這是我的示例代碼：

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="temp1-tab" data-toggle="tab" href="#temp1" role="tab" aria-controls="temp1" aria-selected="true">Temperature 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="temp2-tab" data-toggle="tab" href="#temp2" role="tab" aria-controls="temp2" aria-selected="false">Temperature 2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="temp3-tab" data-toggle="tab" href="#temp3" role="tab" aria-controls="temp3" aria-selected="false">Temperature 3</a>
    </li>
</ul>

<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="temp1" role="tabpanel" aria-labelledby="temp1-tab">
        Display temp1 <br />
        <iframe src="http://192.168.1.107:5000/" title="Temp 2"></iframe> 
        
    </div>
    
    <div class="tab-pane fade" id="temp2" role="tabpanel" aria-labelledby="temp2-tab">
        Display Temp2
    </div>

    <div class="tab-pane fade" id="temp3" role="tabpanel" aria-labelledby="temp3-tab">
        Display Temp3
    </div>
</div>
<script>
$('.tab-link').on('click', function(event) {
    // Prevent url change
    event.preventDefault();
    
    // `this` is the clicked <a> tag
    $('[data-toggle="tab"][href="' + this.hash + '"]').trigger('click');
})
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

謝謝

Answer 1

如果您嘗試在您的網站內打開 url，您可以使用 iframe 來執行此操作。 示例：

Answer 2

如果您嘗試在您的網站內打開 url，您可以使用 iframe 來執行此操作。 示例：

<iframe src="http://192.168.1.107:8080/" title="Tab 2"></iframe>