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

【问题标题】：CSS/Javascript for loading right language content from iframe across different languages/websites?CSS/Javascript 用于从 iframe 跨不同语言/网站加载正确的语言内容？
【发布时间】：2013-06-24 13:10:05
【问题描述】：

我正在尝试在 4 个不同的网页上发布有关我组织的营业时间的相同信息：

互联网站点（公共）：

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

Intranet 站点（需要登录）：

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

为避免每次营业时间更改时都必须更新四个网页，我希望将营业时间列在一个文档 (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 而不是 include(php) 有什么原因吗？在大多数情况下，我个人认为 iframe 非常烦人且不必要。
是的：我不能在我将托管页面的两个子域上使用 php。一个是 Sharepoint Intranet 站点，另一个是 CMS (obvius.dk)。两者都允许我使用 html 和 JavaScript，但 php 不是一个选项。

标签： javascript html css iframe

【解决方案1】：

您可以使用 jquery 方法 .load() 从服务器加载数据并将返回的 HTML 放入匹配的元素中。见：http://api.jquery.com/load

考虑到 .load() 方法通过 Ajax 获取资源。由于浏览器安全限制，大部分“Ajax”请求都以same origin policy为准；请求无法从不同的域、子域、端口或协议成功检索数据。

您可以在这里找到克服跨域请求的有用方法：Loading cross domain html page with jQuery AJAX

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

<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>

... 你有另一个名为 lang.html 的文件，它只是一个带有 html 的视图：

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

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

... 和一些 CSS 来添加糖 ;)

#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;
}

现在，我将使用 jQuery.load() 方法将 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);
}

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

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

【讨论】：

现在我又遇到了一个问题：我需要让 .load 函数跨域工作，因为 Internet 和 Intranet 站点位于不同的域中，我只想拥有一个 lang.html 文件在一个地方。（这样做的重点是，当我们的营业时间发生变化时，只需编辑一个文档。）。有没有简单的方法可以做到这一点？
Chrome 似乎也遇到了这种方法的问题，即使 index.html 和 lang.html 在同一个域中……在 Firefox 和 IE10 中运行良好。
显然 Chrome 在文件系统托管的文件和 Same Origin Policy (file:protocol) 方面存在问题，但您可能会发现它有效如果您将其上传到网络服务器。这是 Chrome 解释的“同源策略”（或具有相同效果的错误）。对于本地系统，您可以尝试使用 --allow-file-access-from-files 运行 Chrome。见：jQuery .load() not working in Chrome
是：在 Web 服务器上加载页面时确认在 Chrome 中工作。现在只剩下“跨域”问题了。我正在尝试探索这个问题，尤其是stackoverflow.com/questions/3076414/… 似乎相关，但我仍然没有找到一个好的解决方案（我知道如何实现）。
我尝试使用 document.domain（在slideshare.net/SlexAxton/breaking-the-cross-domain-barrier 上描述）但 lang.html 将驻留在子域中，我认为这是此解决方案不起作用的原因。示例 URI 是 asubdomain.domain.com/index.html 而 lang.html 将驻留在 anothersubdomain.domain.com/lang.html 上。

【解决方案2】：

将下一个标签放在所有页面的<head> 部分：

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

hours.js 文件应如下所示：

var hours = 15;

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

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

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

例子：

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

现在您只需在一处编辑营业时间：hours.js。

【讨论】：

开放时间页面包含相当复杂的信息，例如不同部门的开放时间、电话和办公时间、不同地点等。如果我正确理解了您的建议，则此解决方案不适用于我需要能够以两种语言显示的信息。
您可以在 JavaScript 中创建任意数量的变量。使用数组定义列表或表格数据w3schools.com/js/js_obj_array.asp。此解决方案的最大好处是您的数据结构非常好。

【解决方案3】：

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

即：

thedomainofyouriframepage.tld/iframe.html?lang=EN

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

How to retrieve GET parameters from javascript?

更新：

在使用 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
}

【讨论】：

这看起来是一个有用的解决方案。我不熟悉使用服务器端脚本来切换文档中的语言。您能否向我展示/链接 iframe.html 的整体标记，以便能够在此文档中以两种语言存储信息？