在另一个 JQuery 选项卡中打开一个 JQuery 选项卡中存在的文档超链接？答案

【问题标题】：Opening a document hyperlink present in one JQuery tab, in another JQuery tab?在另一个 JQuery 选项卡中打开一个 JQuery 选项卡中存在的文档超链接？
【发布时间】：2021-01-26 04:21:08
【问题描述】：

抱歉：我知道这是一个常见问题解答，但我已经查看并尝试了但没有成功。

我想要完成的是在“搜索”选项卡中生成 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>

【问题讨论】：

您的小提琴以打开 Google 为例，但在您的问题中，这听起来像是来自您自己系统的本地搜索结果——那是什么？您将无法通过 AJAX 加载任意第三方网站——它们必须启用 CORS 才能正常工作。
如果您正在加载完整的 HTML 文档，从技术上讲，您将不得不删除它们中的很多内容 - 不能只在其中第二次插入 html、head 和 body一个文件。（我是在技术上说，因为通过浏览器纠错，它可能仍然有效。）在第二个选项卡中有一个 iframe，您只需将 URL 加载到其中，可能是一个更简单的选择。仅适用于允许在不同域上加载框架的 3rd 方站点，并且根据内容修改 iframe 高度仅适用于本地资源，您可以在其中注入脚本进行测量。
@CBroe：注意到了，谢谢。我用一些额外的细节更新了我的问题。

标签： javascript jquery ajax jquery-ui-tabs

【解决方案1】：

当使用带有远程内容的选项卡时，最好使用 jquery ajax 来加载数据。这将调用外部网页，然后在 .done() 函数中，这会将网页响应附加到选项卡/div。

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

如果您需要调试网页 html 响应，请使用以下内容。这样您就可以看到从网页 url 返回的内容

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

请注意，大多数开发人员会确保外部网站页面以 json 格式编写，然后循环遍历一组结果，但这并不总是可行的，尤其是在您不拥有外部网页的情况下。

【讨论】：

非常感谢您的回答。根据您的建议，我被卡住了，并设法得出了一个似乎对我有用的解决方案。我将在单独的答案中发布详细信息，但会接受您的答案。 :-)

【解决方案2】：

您可以尝试使用对外部网页更可靠的 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>

【讨论】：

真；谢谢你的建议，在 StackOverflow 的其他地方得到了回应，等等。如果需要，我可以选择这种方法作为后备或“故障安全”选项。 :-)

【解决方案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>

更新

上述解决方案适用于网页正文中存在的硬编码 URL/链接。

但是，当我尝试在该页面上将相同的方法应用于 Ajax 生成的超链接时，我遇到了一个相当棘手的障碍。

该讨论以及我的最终解决方案记录在此 StackOverflow 线程中。

Trouble passing Ajax-generated URL to a JQuery tab in web page

【讨论】：

是的，您的代码看起来很棒，我很高兴我的示例对您有所帮助。如果您需要添加更多选项卡，我建议在链接上使用数据属性，例如来指定选项卡 ID，然后在 onClick 函数中检索选项卡 ID，例如这 $( "#tabs" ).tabs({ active: this.getAttribute('data-tab-id')});我认为这应该可行。