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

Question

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

Internet 站点(公共(public)):

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

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

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

如有任何帮助，我们将不胜感激。

Answer 1

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

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

在这里您可以找到克服跨域请求的有用方法: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 的 View :

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

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

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

#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() { });