Question

我正在使用jquery load，它必须从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

解决的问题是：

我成功将页面从index.html超链接加载到container.html div id。
有许多超链接，其中一些属性如：

a href =＆＃34; someother.html＆＃34;

a href =＆＃34; http：//someother.com"

a href =＆＃34; ftp：//someother.com"

我正在成功加载＆＃34; href * .html＆＃34; div的超链接#containerWrapper。

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

我试图打开http或ftp链接到其他标签，这也失败了我。这里附有两页示例小提琴：

（这些小提琴不在网上工作，在本地mc工作）

INDEX.HTML FIDDLE

CONTAINER.HTML FIDDLE

请尽量帮助我，抱歉我的英语。

Answer 1

load是一个异步函数，因此在下一行代码运行时很可能无法完成。您可以将click事件处理程序分配给容器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个事件处理程序中的选择器进行比较并执行相关代码。分配此类型的事件处理程序时，不必存在链接。

只需删除两个点击事件处理程序，然后添加它。

您也可以在加载回调函数中分配click事件处理程序，如下所示......

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添加任何其他链接，它将会中断。第一个例子将处理它而不需要任何进一步的更改。

jquery ajax加载外部url属性

1 个答案: