使用 Javascript 进行跨域模板

发布于 2024-08-27 13:33:30 字数 871 浏览 14 评论 0原文

我目前正在构建一个 Javascript 库，可用于根据媒体文件的 URL 轻松创建可嵌入媒体，然后使用 Javascript 方法和事件进行控制（想想 Flash / Silverlight JW 播放器）。

当然，我可以简单地从 Javascript 库中捕获所有 html 标签并将其发送到浏览器：

function player(url) {
    document.write('<object type="foo"><param name="something" value="bar">' + 
    <param name="source" value=" + url + '/></object>');
}

但我认为这是一种非常丑陋的做法，它往往会创建难以管理的代码，当您在几周后查看它时，这些代码将无法读取。

因此，模板解决方案似乎是最佳选择。我一直在寻找 EJS 因为它使用 AJAX 加载模板，因此您可以在单独的文件中管理模板直接在 HTML 页面上。

有一个“问题”：我的库需要完全跨域：库本身可以位于 foo.com 上，而服务站点可以位于 bar.com 上。因此，如果 bar.com 想要使用该库添加媒体播放器，则需要对位于 foo.com 上的模板进行 AJAX 调用，但由于浏览器中的同源策略，这将不起作用。

AFAIK，没有任何库使用 JSONP 之类的东西来读取和写入模板来解决这个问题。

有人能指出我这个问题的解决方案吗？

原文

I'm currently building a Javascript library that can be used to easily create embeddable media based on the URL of a media file, and then be controlled using Javascript methods and events (think something like the Flash / Silverlight JW player).

Of course, i could simply cat all the html tags from the Javascript library and send that to the browser:

function player(url) {
    document.write('<object type="foo"><param name="something" value="bar">' + 
    <param name="source" value=" + url + '/></object>');
}

But i think this is a very ugly practice that tends to create unmanageable code that is unreadable when you review it a few weeks later.

So, a templating solution seems to be the way to go. I've been looking to EJS because it loads the templates using AJAX, so you can manage your templates in separate file instead of directly on the HTML page.

There's one 'gotcha' with that: my library needs to be completely cross-domain: the library itself could be located on foo.com while the serving site could be located on bar.com. So if bar.com would want to add a media player using the library it needs to do an AJAX call to a template located on foo.com, which won't work because of the same-origin policy in browsers.

AFAIK, there's no library that uses something like JSONP to read and write templates to get around this problem.

Could anyone point me to a solution for this problem?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

压抑⊿情绪 2024-09-03 13:33:30

回答我自己的问题：您需要某种提供 JSONP 的服务器端解决方案来解决这个问题。假设您在服务器 foo.com 上有一个模板，您可以有一个服务器端脚本来回答如下请求：

http://foo.com/template/bar.html?callback=cb

它将返回：

cb({
    "html" : "<p>i'm a template!</p>"
});

然后您可以使用您想要的任何模板语言并解析应用程序中的模板。

Answering my own question: you need some kind of server-side solution that delivers JSONP to solve this problem. Let's say tou have a template on server foo.com, you could have a server-side script that answers to requests like these:

http://foo.com/template/bar.html?callback=cb

Which would return:

cb({
    "html" : "<p>i'm a template!</p>"
});

Then you can use any template language you want and parse the template in your app.

回复收藏 0 原文

荆棘i 2024-09-03 13:33:30

这个问题很晚了，但我开始相信 KnockOut JS 是第三方模板渲染的最佳解决方案。如果您将 JS 加载到第三方的网页上，Knockout 可以让您非常轻松地将数据注入到他们的 DOM 中，而不必将整个 HTML 部分作为您“渲染”的模板（这是小胡子的范例）和类似的用途）。

代码很简单 - 这是您想要模板化的第三方网页区域：

<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>

加载knockout js库本身后，您只需将一些数据作为javascript“数据模型对象”呈现给knockout，它就会完成其余的工作：

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.firstName = "Bert";
    this.lastName = "Bertington";
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

参考文献：

Very late to this question, but I've come to believe that KnockOut JS is the best solution for third-party template rendering. If you are loading your JS onto a third-party's web pages, Knockout lets you very easily inject your data into their DOM, without having to hold the entire section of HTML as a template which you "render" (this is the paradigm that moustache and similar use).

The code is simple - here's the third party's web page region you want to template:

<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>

After loading knockout js library itself, you then just present some data to knockout as a javascript "data model object" and it does the rest:

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.firstName = "Bert";
    this.lastName = "Bertington";
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

References:

回复收藏 0 原文

~没有更多了~