在另一個 JQuery 選項卡中打開一個 JQuery 選項卡中的文檔超鏈接？

Question

抱歉：我知道這是一個常見問題解答，但我已經查看並嘗試過但沒有成功。

我想要完成的是在“搜索”選項卡中生成 Apache Solr 結果（完成；工作；附加屏幕截圖），然后在“文檔”選項卡（以及更高版本）中打開這些結果（返回的文檔標題是源文檔的超鏈接），“圖表”選項卡中實體和文檔之間的鏈接）。

目前我正在“離線”工作（本地主機），但最終我想將這項工作在線推送（虛擬專用服務器）。

這是示例代碼和 JS Fiddle， https://jsfiddle.net/pfjtgLs6/

...在此示例中，我使用 Google 作為“結果”選項卡中的鏈接示例，我想在“文檔”選項卡中打開該鏈接。 實際上，這些鏈接（復數）將是文檔的標題（即 Solr 搜索結果）或該選項卡中的其他鏈接。

我在編碼 Ajax 解決方案時遇到了麻煩，該解決方案通常解決這些鏈接（再次，復數），而不是將 URL 硬編碼到 Ajax 方法中。

<!DOCTYPE html>

<html encoding="UTF-8" charset="UTF-8" lang="en-US" language="English" xmlns="https://www.w3.org/1999/xhtml/" itemtype="http://schema.org/WebPage">

<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">

  <script type = "text/javascript">
    $(init);
    function init(){
      $("#tabs").tabs();
    }
  </script>
</head>

<body>
  <div id = "tabs">
    <ul>
      <li><a href="#search">Search</a></li>
      <li><a href="#documents">Documents</a></li>
      <li><a id="documents2_id" href="#documents2">Documents2</a></li>
      <li><a href="#graph">Graph</a></li>
    </ul>

    <div id="search">
      <ul>
        <li>search item 1</li>
        <li>search item 2</li>
      </ul>

        <p>How can I open <a href="https://www.google.com/">this link</a> (Google, for example), in the 'Documents' tab? ... Ajax solutions preferred.</p> 

        <p>Please note that in my project, I am presently working with local files on a localhost webserver; however, I am also interested in comments and suggestions on CORS issues.]</p>

      <p><button type="button" onclick='$("#documents2_id").trigger("click");'>
        Go to 'Documents2' tab
      </button> </p>
    </div>

    <div id="documents">
      <ul>
        <li>documents item 1</li>
        <li>documents item 2</li>
      </ul>
    </div>

    <div id="documents2">
      <ul>
        <li>documents2 item 1</li>
        <li>documents2 item 2</li>
      </ul>
    </div>

    <div id="graph">
      <ul>
        <li>graph item 1</li>
        <li>graph item 2</li>
      </ul>
    </div>
</body>
</html>

Answer 1

當使用帶有遠程內容的選項卡時，最好使用 jquery ajax 加載數據。 這將調用外部 web 頁面，然后在.done() function 這將調用 append 網頁對選項卡/div 的響應。

$.ajax({
  method: "GET",
  url: "http://www.example.com/path/to/url",
  data: {}
}).done(function( response ) {
  $("#documents").html(response);
});

如果您需要調試 web 頁面 html 響應，請使用以下內容。 這樣您就可以看到從 web 頁面 url 返回的內容

$.ajax({
  method: "GET",
  url: "http://www.example.com/path/to/url",
  data: {}
}).done(function( response ) {
  console.log(response);
});

請注意，大多數開發人員會確保外部網站頁面以 json 格式編寫，然后遍歷一組結果，但這並不總是可行的，特別是如果您不擁有外部 web 頁面。

Answer 2

您可以嘗試使用對於外部 web 頁面更可靠的 iframe

<div id="documents">
  <iframe id="iframe-documents" src="http://www.example.com/page1.php" style="width:400px;height:400px;">   
</div>

<div id="documents2">
  <iframe id="iframe-documents-2" src="http://www.example.com/page2.php" style="width:400px;height:400px;">   
</div>

<div id="graph">
  <iframe id="iframe-graph" src="http://www.example.com/page3.php" style="width:400px;height:400px;">   
</div>

Answer 3

作為參考，這是我根據接受的答案得出的解決方案。 單擊測試 URL 在“文檔”選項卡中打開它們，並激活/打開該選項卡。

<html>
<head>
  <script type = "text/javascript">
    $(init);
    function init(){
      $("#tabs").tabs();

      // This selects <a>-elements in the "id=search_tab" <div>:
      $('#search_tab a').on('click', function (event) {
        event.preventDefault();

        // SWITCH TO #documents_tab :
        $( "#tabs" ).tabs({ active: 1 });

        $.ajax({
          method: "GET",
          // url: "http://127.0.0.1:8080/test/d3.html",
          url: this.href,
          data: {}
        }).done(function( response ) {
          $("#documents_tab").html(response);
        });

        })
    }
  </script>
</head>

<body>

  <div id = "tabs">
    <ul>
      <li><a href="#search_tab">Search</a></li>
      <li><a href="#documents_tab">Documents</a></li>
    </ul>
  </div>

  <div id="search_tab">
    <!-- Test URLs: -->
    <p><a href="http://127.0.0.1:8080/test/d1.html">d1.html</a></p>
    <p><a href="http://127.0.0.1:8080/test/d2.html">d2.html</a></p>
    <p><a href="http://127.0.0.1:8080/test/d3.html">d3.html</a></p>
  </div>

  <div id="documents_tab">
  </div>

</body>
</html>

更新

上述解決方案在 web 頁面正文中存在的硬編碼 URL/鏈接上運行良好。

但是，當我嘗試在該頁面上將相同的方法應用於 Ajax 生成的超鏈接時，我遇到了一個相當棘手的障礙。

該討論以及我的最終解決方案記錄在此 StackOverflow 線程中。

無法將 Ajax 生成的 URL 傳遞到 web 頁面中的 JQuery 選項卡

在另一個 JQuery 選項卡中打開一個 JQuery 選項卡中的文檔超鏈接？

問題描述

3 個解決方案

解決方案1
1 已采納 2021-01-19 08:35:09

解決方案2
1 2021-01-19 08:49:03

解決方案3
1 2021-01-19 22:17:43

在另一個 JQuery 選項卡中打開一個 JQuery 選項卡中的文檔超鏈接？

問題描述

3 個解決方案

解決方案1 1 已采納 2021-01-19 08:35:09

解決方案2 1 2021-01-19 08:49:03

解決方案3 1 2021-01-19 22:17:43

解決方案1
1 已采納 2021-01-19 08:35:09

解決方案2
1 2021-01-19 08:49:03

解決方案3
1 2021-01-19 22:17:43