设置变量和值在HTML和JS

Question

我有一个js文件JS文件我有以下变量

var image_path="images"; 
var style_path="style"; 

我想使用的HTML文件（S）

像图像这些变量声明

 <img src="path from js/logo.gif"> 

或样式表声明

 <link rel="stylesheet" href="path from js/constant.css" type="text/css" /> 

这个基本思想是：如果我们改变图像文件夹的名称或图像文件夹的路径，我们只做一个JS文件而不是1000个HTML文件。

样式表相同。

或任何其他方式做Java脚本或jQuery的相同

感谢

Answer 1

可以使用document.write（或jQuery的）来创建标签：

document.write('<img src="' + image_path + '/logo.gif">'); 

注意，变量必须是在通话之前设置。

但是，最好在服务器端代码中执行此操作。

Answer 2

你无法做到这一点。你必须用JavaScript动态生成所有内容 - 这会将它从搜索引擎和任何没有JS的人隐藏起来。

你最好使用某种模板引擎。

Template-Toolkit可以从服务器端脚本驱动，或用于生成静态页面上传（例如使用ttree）。

然后你可以做这样的事情：

[% 
    image_path = "images"; 
    style_path = "style"; 
%] 

然后：

[% INCLUDE "common.tt"; %] 
<link rel="stylesheet" href="[% style_path %]/constant.css" type="text/css" /> 

他们有a tutorial for web page authoring in TT。

Answer 3

您是否考虑过使用<base>标记？为什么不能问我:)

Answer 4

我对此偏向jQuery。我同意服务器端可能更好的人群，但如果你需要在客户端上做，你可以做以下事情。

添加一个类到应该被影响的img元素（或跳过我的例子的这个方面，如果它应该适用于所有...我只是想用jQuery来证明你可以使它有条件并使用类选择器来这样做）。

例如：<img class="relative_url" src="logo.gif" /> 或：<img class="img_style relative_url" src="logo.gif" />（如果图像上已经有一类）

然后，你可以使用像它在页面加载（通过$(document).ready()）获得该类别相匹配的所有IMG元素下面的函数名称并在它们前面迭代根路径。

请原谅我的语法并以此为伪代码...我已经有一段时间没有

$(document).ready(function(){ 
    fixRelativeUrls(); 
}); 

function fixRelativeUrls() 
{ 
    $("img.relative_url").each(function(index) { 
     $(this).src = image_path + "/" + $(this).src; 
    }); 
}