87,984
社区成员
发帖
与我相关
我的任务
分享利用JS保持地址栏不变和语言跳转, 功能实现, 但细节不完美, 求解.
目的:
1. 利用JS实现根据浏览器的语言版本实现不同页面的请求.
2. 利用JS实现不同页面请求后, 地址栏保持不变.
index.htm代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script>
function createXMLHttpRequest(){
if(window.XMLHttpRequest){
XMLHttpR = new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
XMLHttpR = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
XMLHttpR = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
}
}
}
}
function sendRequest(url){
createXMLHttpRequest();
XMLHttpR.open("GET",url,true);
XMLHttpR.setRequestHeader("Content-Type","text/html;charset=utf-8");
XMLHttpR.onreadystatechange = processResponse;
XMLHttpR.send(null);
}
function processResponse(){
if(XMLHttpR.readyState ==4 && XMLHttpR.status == 200){
document.write(XMLHttpR.responseText);
}
}
</script>
<script>
var type=navigator.appName
if (type=="Netscape")
var lang = navigator.language
else
var lang = navigator.userLanguage
if (lang.substr(0,5) == "zh-cn")
sendRequest("http://www.xxx.com/cn.htm")
else
sendRequest("http://www.xxx.com/en.htm")
</script>
</body>
</html>
cn.htm代码如下:
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<link rel="Shortcut Icon" href="favicon.ico">
<style type="text/css">
.style1 {
text-align: center;
}
.style2 {
text-align: right;
}
</style>
</head>
<div class="style1">
<img src="images/LogoX.jpg"></div>
<p class="style1">中文页面</p>
en.htm代码如下
<head>
<meta http-equiv="Content-Language" content="EN">
<link rel="Shortcut Icon" href="favicon.ico">
<style type="text/css">
.style1 {
text-align: center;
}
.style2 {
text-align: right;
}
</style>
</head>
<div class="style1">
<img src="images/LogoX.jpg"></div>
<p class="style1">English Page</p>
基本的功能目标已经实现, 可问题是, 不同语言版本的页面在浏览器状态栏分别出现:
"正在下载图片 http://www.xxx.com/images/LogX.jpg..."
"Downloading Picture http://www.xxx.com/images/LogX.jpg..."
而实际上, 这个图片已经加载完毕了. 如果点击刷新一次,又都正常完成了?
1. 利用JS实现根据浏览器的语言版本实现不同页面的请求.
2. 利用JS实现不同页面请求后, 地址栏保持不变.
index.htm代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script>
function createXMLHttpRequest(){
if(window.XMLHttpRequest){
XMLHttpR = new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
XMLHttpR = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
XMLHttpR = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
}
}
}
}
function sendRequest(url){
createXMLHttpRequest();
XMLHttpR.open("GET",url,true);
XMLHttpR.setRequestHeader("Content-Type","text/html;charset=utf-8");
XMLHttpR.onreadystatechange = processResponse;
XMLHttpR.send(null);
}
function processResponse(){
if(XMLHttpR.readyState ==4 && XMLHttpR.status == 200){
document.write(XMLHttpR.responseText);
}
}
</script>
<script>
var type=navigator.appName
if (type=="Netscape")
var lang = navigator.language
else
var lang = navigator.userLanguage
if (lang.substr(0,5) == "zh-cn")
sendRequest("http://www.xxx.com/cn.htm")
else
sendRequest("http://www.xxx.com/en.htm")
</script>
</body>
</html>
cn.htm代码如下:
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<link rel="Shortcut Icon" href="favicon.ico">
<style type="text/css">
.style1 {
text-align: center;
}
.style2 {
text-align: right;
}
</style>
</head>
<div class="style1">
<img src="images/LogoX.jpg"></div>
<p class="style1">中文页面</p>
en.htm代码如下
<head>
<meta http-equiv="Content-Language" content="EN">
<link rel="Shortcut Icon" href="favicon.ico">
<style type="text/css">
.style1 {
text-align: center;
}
.style2 {
text-align: right;
}
</style>
</head>
<div class="style1">
<img src="images/LogoX.jpg"></div>
<p class="style1">English Page</p>
基本的功能目标已经实现, 可问题是, 不同语言版本的页面在浏览器状态栏分别出现:
"正在下载图片 http://www.xxx.com/images/LogX.jpg..."
"Downloading Picture http://www.xxx.com/images/LogX.jpg..."
而实际上, 这个图片已经加载完毕了. 如果点击刷新一次,又都正常完成了?
...全文
请发表友善的回复…
发表回复
dibotiger 2013-03-15
- 打赏
- 举报
感谢回复, 不好意思继续追问. 先结贴给分.
遇到新的类似的问题,请帮忙继续回答.
http://bbs.csdn.net/topics/390392979
斯洛文尼亚旅游 2013-03-14
- 打赏
- 举报
既然得到了语言，设置document.title就可以修改index.html的浏览器窗口标题了
如果有很多页面，通过请求html得到title，可以再设置innerHTML前用正则获取title标签的内容设置document.title属性，然后替换掉title标签就行。
if (lang.substr(0,5) == "zh-cn"){
sendRequest("http://www.xxx.com/cn.htm")
document.title="中文"
}
else{
sendRequest("http://www.xxx.com/en.htm")
document.title="english"
}var text=XMLHttpR.responseText;
document.body.innerHTML = text.replace(/<title>([\s\S]+?)<\/title>/ig
,function($0,$1){
document.title=$1;///设置title用的
return ''//返回空去掉返回的title标签
});dibotiger 2013-03-14
- 打赏
- 举报
哈哈, 感谢, WEB开发一窍不通. 所以只能依葫芦画瓢了.
按照你说的, 把style放入index.htm中. 把cn.htm和en.htm中的
<html> <head> <body>标签全部剔除.
现在可以居中显示了, 可还是剩下一个小问题:
我在cn.htm设置了:<title>中文</title>
我在en.htm设置了::<title>english</title>
但标题栏文字均不显示了? 是不是这个<title>标签也要移入index.htm?
问题是, 这个index.htm我需要如果修改才能适应不同的语言判断来设置不同的标题栏问题?
斯洛文尼亚旅游 2013-03-14
- 打赏
- 举报
将style放到index。html中就行了。。
document.write输出style有用，设置innerHTML包含style没作用
dibotiger 2013-03-14
- 打赏
- 举报
感谢回复, 按照你的提示修改了下, 状态栏的提示正常完成了.
但是出现了新问题, 也就是cn.htm或则en.htm中原来的的图片居中的样式不可用了.
也就是出现的图片不在是原来在中间的效果, 变成了左对齐.
斯洛文尼亚旅游 2013-03-14
- 打赏
- 举报
不要再文档流关闭后使用document.write输出内容，这样会导致当前页面的内容被输出的内容覆盖，并且状态栏一直在加载。。
//document.write(XMLHttpR.responseText);
document.body.innerHTML = XMLHttpR.responseText;
Kilin_Zhang 2013-03-14
- 打赏
- 举报
楼主为什么不把这个功能交给服务端去完成呢。
服务端根据条件加载不同View就行了啊。
