1

我正在尝试在 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 的正确性将显示给用户。

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

任何帮助将非常感激。

4

3 回答 3

0

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

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

在这里您可以找到克服跨域请求的有用方法：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() { });

于 2013-06-24T16:59:53.327 回答
0

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

IE：

thedomainofyouriframepage.tld/iframe.html?lang=EN

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

如何从 javascript 中检索 GET 参数？

更新：

使用 jQuery 时可能看起来像这样 - 设置所有 lang div display:none：

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

//假设 lang 参数是第一个获取参数...

switch(lang){
    case 'de': $("div.german").show(); break;
//   ... other languages analogue
}
于 2013-06-24T13:14:01.297 回答
0

将下一个标签放在<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.

于 2013-06-24T13:18:03.490 回答