跨不同语言/网站从iframe加载正确语言内容的CSS/Javascript？

我正试图在4个不同的网页上发布关于我所在组织开放时间的相同信息：

互联网站点（公共）：

• 英文网站：英文开放时间
• 丹麦网站：丹麦语开放时间

内部网站（需要登录）：

• 英文网站：英文开放时间
• 丹麦网站：丹麦语开放时间

为了避免每次我的开放时间改变时都要更新四个网页，我希望在一个单独的文档（iframe.html）中列出我的开放时间，该文档作为iframe从上述4个站点加载

在4个网站（websiteX.html）中的每一个网站上，我想：

• 设置我希望显示营业时间的语言
• 加载iframe.html，让它以设置的语言显示我的营业时间，并以未设置的语言隐藏营业时间

我想象iframe.html的结构如下：

<div class="english">
Opening hours in English
</div>

<div class="danish">
Opening hours in Danish
</div>

英语开放时间
丹麦语开放时间

我认为解决这个问题需要：

• websiteX.html中的CSS和JavaScript，用于设置iframe.html的英语/丹麦语部分的语言和显示（隐藏/显示）
• 在websiteX.html和/或iframe.html中使用JavaScript，以确保在websiteX.html中设置的选项被正确继承/推送到iframe.html中，从而向用户显示iframe.html的正确版本

我一直无法找到这个问题的解决方案，不幸的是，我自己对如何从底层构建解决方案一无所知

---

任何帮助都将不胜感激。

在iFrame的URL中提供GET参数，并在其中分配语言。 检查参数以了解调用页需要哪种语言

i、 e:

如果您不能使用服务器端脚本通过GET参数切换语言，那么这里有一些问题可能会对您有所帮助

更新：

使用jQuery时可能是这样的-设置所有lang

div

display:none

：

var param = window.location.search.replace( "?", "" ).split("&").shift();
var lang = param.split("=").pop();

//假设lang参数是第一个get参数

switch(lang){
    case 'de': $("div.german").show(); break;
//   ... other languages analogue
}

---

将下一个标记放在所有页面的

部分：

<script type="text/javascript" src="hours.js"></script>

可能的值为任何数字或“带引号的字符串”

然后将下一个标签放在您想要输出开放时间的任何位置：

<script type="text/javascript">document.write(hours);</script>

document.write（小时）；

例如：

<div>
    Opening hours:
    <script type="text/javascript">document.write(hours);</script>
</div>

开放时间：
文件。书写（小时）；

---

现在您只需要在一个地方编辑开放时间：

hours.js

您可以使用jquery方法.load（）从服务器加载数据，并将返回的HTML放入匹配的元素中。见：

考虑到方法通过Ajax获取资源。由于浏览器的安全限制，大多数“Ajax”请求都会受到以下限制：；请求无法从其他域、子域、端口或协议成功检索数据

在这里，您可以找到克服跨域请求的有用方法：

---

现在我们来看一个例子：
假设您有一个名为index.html的页面。。。

---

现在，我将使用方法将lang.html的内容加载到index.html的内容部分

//Click handler for the navigation #nav-lang
$(document).on("change.language", '#nav-lang', function() {
    var lang = $(this).val();
    fnShowLoading(true);

    setTimeout(function() { //remove this line: used for loading...
        //loads the content dynamically   
        $('#dynamic-content').load('views/lang.html #' + lang, function() {
            fnShowLoading(false);
        });
    }, 2000); //remove this line: used for loading...
});

//Shows or hides the loading indicator
function fnShowLoading (show) {
    var display = show ? 'block' : 'none';
    $('#imgLoading, .bgLoading').css('display', display);
}

正如您所见，这里唯一重要的一行是：

---

开放时间页面包含相当复杂的信息，如不同部门的开放时间、电话和办公时间、不同地点等。如果我正确理解了您的建议，此解决方案无法处理我需要以两种语言显示的大量信息。您可以在JavaScript中创建所需数量的变量。使用数组定义列表或表数据。此解决方案的最大好处是，您的数据将真正具有良好的结构。这看起来是一个有用的解决方案。我不熟悉使用服务器端脚本在文档中切换语言。你能不能给我看一下/链接一下iframe.html的整体标记，让我能够在这个文档中以两种语言存储信息？你真的想用iframe而不是include（php）吗？我个人觉得iFrame在大多数情况下都是非常烦人和不必要的。是的：我不能在托管页面的两个子域上使用php。一个是Sharepoint intranet站点，另一个是CMS（）。两者都允许我使用html和JavaScript，但php不是一个选项。现在我又遇到了一个问题：我需要让.load函数跨域工作，因为internet和intranet站点位于不同的域上，我只希望在一个地方有一个lang.html文件。（这一点的关键是，当我们的开放时间改变时，只需编辑一份文件。）。有没有一种简单的方法可以做到这一点？Chrome似乎也有这种方法的问题，即使index.html和lang.html在同一个域上。。。在Firefox和IE10中运行良好。显然，Chrome在文件系统中托管的文件以及同源策略（文件：协议）方面存在问题，但如果您将其上载到web服务器，您可能会发现它是有效的。这是Chrome解释的“同源策略”（或具有相同效果的bug）。对于本地系统，您可以尝试使用--允许从文件访问文件来运行Chrome。请参阅：是：在web服务器上加载页面时已确认在Chrome中工作。现在只剩下“跨域”问题了。我正在尝试探索这个问题，尤其是看起来相关的问题，但我仍然没有找到一个好的解决方案（我知道如何实现）。我尝试使用document.domain（在上介绍），但lang.html将驻留在子域上，我认为这是此解决方案无法工作的原因。示例URI是asubdomain.doma

<div>
    Opening hours:
    <script type="text/javascript">document.write(hours);</script>
</div>

<header>
  <nav>
    <span>Select language </span>
    <select id="nav-lang">
      <option value="english">English</option>
      <option value="danish">Danish</option>
    </select>
  </nav>
</header>

<section>
  <article id="dynamic-content" class="wrapper-style">
    Dynamic content will be placed here!
  </article>
</section>

<aside>
  <div class="bgLoading"></div>
  <div id="imgLoading">
    <img src="http://www.ajaxload.info/images/exemples/24.gif" />
  </div>
</aside>

<div>
  <div id="english">
    Opening hours in English
  </div>

  <div id="danish">
    Opening hours in Danish
  </div>
</div>

#imgLoading {
  z-index: 3000;
  position: fixed;
  top: 47.10%;
  left: 48.56%;
  display: none;
}
.bgLoading {
  z-index: 2999;
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0;
  background-color: White;
  opacity: 0.36;
  filter: alpha(opacity=36);
  display: none;
}
.wrapper-style {
  padding: 8px 12px;
  border: dotted 1px #444;
}

//Click handler for the navigation #nav-lang
$(document).on("change.language", '#nav-lang', function() {
    var lang = $(this).val();
    fnShowLoading(true);

    setTimeout(function() { //remove this line: used for loading...
        //loads the content dynamically   
        $('#dynamic-content').load('views/lang.html #' + lang, function() {
            fnShowLoading(false);
        });
    }, 2000); //remove this line: used for loading...
});

//Shows or hides the loading indicator
function fnShowLoading (show) {
    var display = show ? 'block' : 'none';
    $('#imgLoading, .bgLoading').css('display', display);
}

$('#dynamic-content').load('views/lang.html', function() { });