在同一选项卡窗格中单击选项卡时打开 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>