我正在开发可以在任何网站上显示的 JavaScript 小部件。
看。
- Show JS(jQuery) widget on any site, with ASP.NET MVC server side
- Embeddable widgets using jQuery and ASP.NET MVC
现在,当我需要在小部件中的页面之间导航时,我遇到了问题。请参阅下面的代码。但现在我很困惑如何在来自服务器的 html 中组织导航(链接点击、ajax 更新),使其像没有小部件一样工作,因为我想像平常页面一样调试它。
<img alt="TEST" onclick="window.zs.LoadStep1('ad507a69-d882-41d4-8300-bd9f7163d419',this);" style="cursor:pointer;"/>
;
(function (window, ZS, undefined) {
var zs = window.zs = ZS || {};
zs.Version = "v1_0";
zs.baseUrl = "http://localhost/w/";
var jQueryScriptOutputted = false;
var containerSelector = '#zaprosWidgetContainer';
function initJQuery() {
if (typeof (jQuery) == 'undefined') {
if (!jQueryScriptOutputted) {
jQueryScriptOutputted = true;
document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js\"></scr" + "ipt>");
}
setTimeout("initJQuery()", 50);
}
};
function initContainer() {
if ($(containerSelector).length == 0) {
$('<div id="zaprosWidgetContainer" style="width=500px;height:500px;"></div>').appendTo('body');
}
}
zs.LoadStep2 = function (serviceId) {
$.ajax({
url: zs.baseUrl + 'Wizard/Step2JsonP?jsoncallback=?',
data: { serviceId: serviceId },
type: "GET",
dataType: "jsonp",
jsonpCallback: "callBack",
success: function (json) {
$(containerSelector).html(json.Html);
}
});
},
zs.LoadStep1 = function (providerId) {
$(function () {
$.ajax({
url: zs.baseUrl + 'Wizard/Step1JsonP?jsoncallback=?',
data: { providerId: providerId },
type: "GET",
dataType: "jsonp",
jsonpCallback: "callBack",
success: function (json) {
$(containerSelector).html(json.Html);
}
});
});
};
initJQuery();
initContainer();
})(window, window.zs || {});
最佳答案
我知道您想要导航到 LoadStep1/LoadStep2,而不使用 ajax 样式?
您可以在 ASP.NET 中创建一个母版页,其中包含用于导航到下一步的链接/按钮。该链接是作为上一步的一部分生成的。
例如在Step1的输出html上添加
<a href="/.../Step2InMaster?serviceID=13">Next Step</a>
您能告诉我们为什么必须创建“非小部件模式”来进行调试吗?调试有什么区别?
有关 JsonP 的其他内容对我有帮助:
您还可以扩展 JsonP 类,将 JSON 数据包装到 JsonP 字符串中,以支持在未提供回调方法时返回正常 JSON - 这样您就可以使用相同的 uri 直接返回 html。我用它来允许小部件同时在 JsonP 和 Json 中运行。
关于javascript - 使用 JSONP 在 javascript 小部件中导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14894372/