在另一个 JQuery 选项卡中打开一个 JQuery 选项卡中的文档超链接?
Opening a document hyperlink present in one JQuery tab, in another JQuery tab?
抱歉:我知道这是一个常见问题解答,但我已经看过并尝试过但没有成功。
我想要完成的是在“搜索”选项卡中生成 Apache Solr 结果(完成;工作;附加屏幕截图),然后打开这些结果(返回的文档标题是 hyperlinks 到源“文档”选项卡中的文档)(之后,“图形”选项卡中的实体和文档之间 links)。
目前我正在“离线”工作(本地主机),但最终我想将这项工作推到网上(虚拟专用服务器)。
这是示例代码和一个 JS Fiddle, https://jsfiddle.net/pfjtgLs6/
... 在此示例中,我使用 Google 作为“结果”选项卡中 link 的示例,我想在“文档”选项卡中打开它。实际上,那些 links(复数)将是文档的标题(这是 Solr 搜索结果),或者该选项卡中的其他 links。
我一直在编写一个 Ajax 解决方案时遇到问题,该解决方案通常解决那些 link(再次,复数),而不是将 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>
在使用包含远程内容的选项卡时,最好使用 jquery ajax 来加载数据。这将调用外部网页,然后在 .done() 函数内将网页响应附加到 tab/div.
$.ajax({
method: "GET",
url: "http://www.example.com/path/to/url",
data: {}
}).done(function( response ) {
$("#documents").html(response);
});
如果您需要调试网页 html 响应,请使用下面的。这样你就可以从网页url
中看到什么是returns
$.ajax({
method: "GET",
url: "http://www.example.com/path/to/url",
data: {}
}).done(function( response ) {
console.log(response);
});
请注意,大多数开发人员会确保外部网站页面以 json 格式编写,然后遍历一组结果,但这并不总是可行的,尤其是在您不拥有外部网页的情况下。
您可以尝试使用对外部网页更可靠的 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>
作为参考,这是我根据接受的答案得出的解决方案。单击测试 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 生成的超链接应用相同的方法时,我遇到了一个相当棘手的障碍。
该讨论和我的最终解决方案记录在这个 Whosebug 线程中。
抱歉:我知道这是一个常见问题解答,但我已经看过并尝试过但没有成功。
我想要完成的是在“搜索”选项卡中生成 Apache Solr 结果(完成;工作;附加屏幕截图),然后打开这些结果(返回的文档标题是 hyperlinks 到源“文档”选项卡中的文档)(之后,“图形”选项卡中的实体和文档之间 links)。
目前我正在“离线”工作(本地主机),但最终我想将这项工作推到网上(虚拟专用服务器)。
这是示例代码和一个 JS Fiddle, https://jsfiddle.net/pfjtgLs6/
... 在此示例中,我使用 Google 作为“结果”选项卡中 link 的示例,我想在“文档”选项卡中打开它。实际上,那些 links(复数)将是文档的标题(这是 Solr 搜索结果),或者该选项卡中的其他 links。
我一直在编写一个 Ajax 解决方案时遇到问题,该解决方案通常解决那些 link(再次,复数),而不是将 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>
在使用包含远程内容的选项卡时,最好使用 jquery ajax 来加载数据。这将调用外部网页,然后在 .done() 函数内将网页响应附加到 tab/div.
$.ajax({
method: "GET",
url: "http://www.example.com/path/to/url",
data: {}
}).done(function( response ) {
$("#documents").html(response);
});
如果您需要调试网页 html 响应,请使用下面的。这样你就可以从网页url
中看到什么是returns$.ajax({
method: "GET",
url: "http://www.example.com/path/to/url",
data: {}
}).done(function( response ) {
console.log(response);
});
请注意,大多数开发人员会确保外部网站页面以 json 格式编写,然后遍历一组结果,但这并不总是可行的,尤其是在您不拥有外部网页的情况下。
您可以尝试使用对外部网页更可靠的 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>
作为参考,这是我根据接受的答案得出的解决方案。单击测试 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 生成的超链接应用相同的方法时,我遇到了一个相当棘手的障碍。
该讨论和我的最终解决方案记录在这个 Whosebug 线程中。