0

我正在尝试创建一个可以从其他域引用的 Javascript 文件，该文件将允许更改用户页面的外观。

例如，javascript 文件 (www.mywebsite.com/123.js) 将在 www.userwebsite.com 上引用，并且可能包含以下内容：

var thebody = document.getElementsByTagName('body')[0];
var newdiv = document.createElement('div');
var txtNode = document.createTextNode("Hello. This is a new node.");   
var divIdName = "mydiv";
var csslink = "http://www.anotherwebsite.com/style.css";
var newcss = document.createElement('link');
newcss.setAttribute('href',csslink);
newcss.setAttribute('rel','stylesheet');
newcss.setAttribute('type','text/css');
newdiv.setAttribute('id',divIdName);
newdiv.appendChild(txtNode);
thebody.appendChild(newdiv);
thebody.appendChild(newcss);

这将插入对托管在用户网站上的 CSS 文件的引用，并使用文本节点“你好。这是一个新节点”向 DOM 添加一个新 div。

我希望用户能够登录到 CMS（我将构建），这样他们就可以更改打印到页面的文本，而无需更改我提供给他们的 Javascript 文件。CMS 将托管在我的网站上。

这样做的最佳做法是什么？

显然，我可以远程编辑 javascript 文件，而用户无需更改任何内容 - 但这是更新脚本的最佳方法吗？

我正在考虑在 javascript 中有一个 Ajax 请求，该请求从引用 mysql 数据库的 php 文件中检索输出，其中包含用户想要更改的文本 - 但是，相同的来源策略意味着这是不可能的。

谢谢

4

1 回答 1

0

您不需要使用 AJAX 来检索 PHP 输出；让客户将<script />标签添加到他们的页面，并将src属性设置为您的 PHP 输出；只需确保您的脚本发出有效的 JavaScript。

由于您的 Web 服务器现在认为它位于 PHP 领域而不是 JS 资产中，因此请确保发出正确的页眉；MIME 类型和过期时间浮现在脑海中。

header('Content-Type: application/x-javascript');
header('Last-Modified: Mon, 03 Sep 2012 22:33:44 GMT');

此外，请注意您的脚本将在其中执行的不可靠且“敌对”的环境。您应该尽量减少 JavaScript 脚本声明的全局变量的数量，以降低冲突的风险。最简单的方法是将代码包装在 IIFE 中；

// Look ma, no global variables!
(function () {

var thebody = document.getElementsByTagName('body')[0];
var newdiv = document.createElement('div');
var txtNode = document.createTextNode("Hello. This is a new node.");   
var divIdName = "mydiv";
var csslink = "http://www.anotherwebsite.com/style.css";
var newcss = document.createElement('link');
newcss.setAttribute('href',csslink);
newcss.setAttribute('rel','stylesheet');
newcss.setAttribute('type','text/css');
newdiv.setAttribute('id',divIdName);
newdiv.appendChild(txtNode);
thebody.appendChild(newdiv);
thebody.appendChild(newcss);

}());

您还应该考虑为您的 CSS 类、元素 ID 等添加前缀，以尽量减少与主机命名方案的冲突。

于 2012-09-03T21:28:39.393 回答