jquery ajax 加载外部 url 属性

Question

我正在处理 jquery 加载，它必须从 index.html 页面导航到 container.html。

index.html 页面 jquery 代码如下所示

$(".tblList a").click(function () {
var aUrl = $(this).attr("href");
var page = aUrl.split("?page=");
localStorage.setItem("pageName", page[1]); }); //click end

在 container.html 页面中，我的 html 和 jquery 代码如下所示：

html:

<div id="containerWrapper" class="row"></div>

js:

 $(function () {

 var pageName = localStorage.getItem("pageName");
 $("#containerWrapper").load(pageName + ".html");

 $("#containerWrapper").find('a[href^="http"]').click(function () {
     alert("http");
     window.open(this.href);
     return false;
     //$('#containerWrapper').load($(this).attr("href"));
 });

 $('a[href^="ftp"]').click(function () {
     alert("ftp");
     $(this).attr("target", "_blank");
 }); });

 $(window).bind('hashchange', function (e) {
     var url = window.location.toString();
     var innerPagesLink = url.split("?page=")[0];
     var innerPagesLinkUrl = url.split("#")[1];
     var result = innerPagesLink + "#" + innerPagesLinkUrl;
     var replaceUrl = url.replace("?page=", "#");
     //alert(innerPagesLink); return false;
     window.location = innerPagesLink;

     newHash = window.location.hash.substr(1);
     $mainContent.load(newHash);
 }); //bind end

解决的是：

1. 我已成功将页面从 index.html 超链接加载到 container.html div id。

2. 在 container.html（已加载页面）中有许多超链接，其中一些具有以下属性：

   a href="someother.html"

   a href="http://someother.com"

   a href="ftp://someother.com"

我正在成功加载指向 div#containerWrapper 的“a href *.html”超链接。

我无法将 http 和 ftp 外部页面加载到我的 div。

我试图打开指向其他选项卡的 http 或 ftp 链接，但我也失败了。 此处附有两个带有示例小提琴的页面：

（这些小提琴不能在本地 mc 中工作的在线工作）

INDEX.HTML FIDDLE

CONTAINER.HTML FIDDLE

请尝试帮助我，并为我的英语感到抱歉。

Answer 1

load 是一个异步函数，所以它很可能在下一行代码运行时还没有完成。您可以将点击事件处理程序分配给容器 div，就像这样...

// assign click event handler to container, for http link clicks
$("#containerWrapper").on("click", "a[href^=http]", function () {
     alert("http");
     window.open(this.href);
     return false;
});
// assign click event handler to container, for ftp link clicks
$("#containerWrapper").on("click", "a[href^=ftp]", function () {
    alert("ftp");
    $(this).attr("target", "_blank");
});

这意味着当点击#containerWrapper 中的任何元素时，它将与2 个事件处理程序中的选择器进行比较并执行相关代码。分配此类事件处理程序时，链接不必存在。

只需删除两个单击事件处理程序并添加它即可。

您也可以在加载回调函数中分配点击事件处理程序，像这样...

var pageName = localStorage.getItem("pageName");
$("#containerWrapper").load(pageName + ".html", function() {
    // assign click event handler to http links
    $(this).find("a[href^=http]").on("click", function () {
         alert("http");
         window.open(this.href);
         return false;
    });
    // assign click event handler to ftp links
    $(this).find("a[href^=ftp]").on("click", function () {
        alert("ftp");
        $(this).attr("target", "_blank");
    });
});

如果不是更好（性能提升非常非常轻微），这同样可以工作，但是如果在该代码运行后添加任何指向容器 div 的进一步链接，它会中断。第一个示例将在没有任何进一步更改的情况下处理该问题。