利用JS保持地址栏不变和语言跳转, 功能实现, 但细节不完美, 求解.

dibotiger 2013-03-14 03:13:38
目的:
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..."

而实际上, 这个图片已经加载完毕了. 如果点击刷新一次,又都正常完成了?

...全文
413 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
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
  • 打赏
  • 举报
 回复
引用 4 楼 showbo 的回复:
将style放到index。html中就行了。。 document.write输出style有用，设置innerHTML包含style没作用
哈哈, 感谢, 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
  • 打赏
  • 举报
 回复
引用 2 楼 showbo 的回复:
不要再文档流关闭后使用document.write输出内容，这样会导致当前页面的内容被输出的内容覆盖，并且状态栏一直在加载。。 JavaScript code ? 12 //document.write(XMLHttpR.responseText); document.body.innerHTML = XMLHttp……
感谢回复, 按照你的提示修改了下, 状态栏的提示正常完成了. 但是出现了新问题, 也就是cn.htm或则en.htm中原来的的图片居中的样式不可用了. 也就是出现的图片不在是原来在中间的效果, 变成了左对齐.
斯洛文尼亚旅游 2013-03-14
  • 打赏
  • 举报
 回复
不要再文档流关闭后使用document.write输出内容，这样会导致当前页面的内容被输出的内容覆盖，并且状态栏一直在加载。。 
           //document.write(XMLHttpR.responseText);
            document.body.innerHTML = XMLHttpR.responseText;
cn.htm和en.htm删除<html>,<body>.<head>这种标签
Kilin_Zhang 2013-03-14
  • 打赏
  • 举报
 回复
楼主为什么不把这个功能交给服务端去完成呢。 服务端根据条件加载不同View就行了啊。
文档操作系统：模板驱动的PDF自动化生成原理与实践
本文深入剖析文档操作系统的核心原理，聚焦模板驱动的PDF自动化生成技术。系统包含四大模块：参数化模板管理中心、结构化内容摄取引擎、确定性布局渲染引擎及状态同步交互编辑器。工作流涵盖模板选型（业务逻辑框架）、多源内容导入、三次计算自动排版、精细化手动调整及动态交付（静态PDF与可更新链接）。关键技术点包括XML/JSON模板定义、语义归一化文档模型、纯规则驱动渲染、WebSocket实时协同及Content-as-a-Service交付模式。
【双层鲸鱼算法求解】基于非合作博弈的居民负荷分层调度模型（Matlab代码实现）
内容概要：本文提出了一种基于非合作博弈理论的居民负荷分层调度模型，并结合双层鲸鱼优化算法（Two-level Whale Optimization Algorithm）进行高效求解，模型与算法均通过Matlab代码实现。研究针对电力系统中居民侧用电负荷的复杂调度问题，引入非合作博弈机制刻画各用户之间的利益竞争关系，实现负荷的分层优化分配；同时设计双层优化架构，上层优化资源配置，下层模拟用户自主决策行为，提升了模型的实用性与合理性。通过智能优化算法求解多层级、非凸非线性的博弈模型，有效提高了调度方案的收敛性与全局寻优能力，适用于现代智能电网中的需求侧管理与能源优化场景。; 适合人群：具备电力系统基础理论知识和Matlab编程能力，从事智能电网、能源优化调度、需求侧管理、博弈论应用等方向的科研人员、高校研究生及工程技术人员。; 使用场景及目标：①应用于居民区电力负荷的分层优化调度系统设计与仿真分析；②为非合作博弈在多主体能源系统建模中的应用提供方法论支持；③利用双层鲸鱼算法解决具有嵌套结构的复杂双层优化问题，提升求解效率与调度方案的可行性。; 阅读建议：建议读者结合提供的Matlab代码深入理解模型构建逻辑与算法实现流程，重点关注博弈模型的效用函数设计、纳什均衡求解思路以及双层优化结构的迭代机制，宜配合实际用电数据开展复现实验以验证模型有效性与鲁棒性。
如何打造区域科技成果转化高地.docx
如何打造区域科技成果转化高地
【基于可再生能源的微电网功率管理系统】基于自适应神经模糊推理系统智能控制器的可再生能源微电网功率管理系统及经济机组组合调度研究（Simulink仿真实现）
内容概要：本文围绕基于自适应神经模糊推理系统（ANFIS）智能控制器的可再生能源微电网功率管理系统展开研究，结合Simulink仿真实现，深入探讨了微电网中功率的智能调控与经济机组组合调度问题。通过引入ANFIS控制器，有效应对风能、光伏等可再生能源出力的波动性与不确定性，提升系统运行的稳定性与电能质量。研究内容涵盖微电网多源协调控制策略、功率平衡管理、优化调度模型构建及仿真验证，实现了对分布式电源、储能系统和负荷的协同优化，兼顾经济性与可靠性目标，并通过仿真平台验证了所提方法的有效性与优越性。; 适合人群：具备电力系统、自动化或新能源相关专业背景，熟悉Matlab/Simulink仿真环境，从事微电网能量管理、智能控制、能源优化等领域研究的研究生、科研人员及工程技术人员。; 使用场景及目标：①用于高比例可再生能源接入场景下的微电网能量管理系统研发与教学实践；②为实现微电网功率稳定控制与经济高效运行提供先进的智能控制解决方案；③支撑高水平学术论文复现、科研课题攻关及实际工程项目的仿真验证与方案优化。; 阅读建议：建议结合提供的Simulink模型与相关代码进行动手实践，重点关注ANFIS控制器的设计流程、规则库构建与参数调优方法，并通过与传统PID或MPC控制策略的对比实验，深入理解其在动态响应与鲁棒性方面的优势。同时可进一步拓展文中提出的优化调度逻辑，应用于多目标、多约束的复杂实际应用场景中。
JavaScript

87,989

社区成员

224,684

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章