1

I am trying to publish the same information about opening hours for my organisation across 4 different webpages:

Internet sites (public):

  • English website: Opening hours in English
  • Danish website: Opening hours in Danish

Intranet sites (requires login):

  • English website: Opening hours in English
  • Danish website: Opening hours in Danish

To avoid having to update four web pages each time my opening hours change, I would like to have my opening hours listed in one single document (iframe.html) which is loaded as an iframe from the above 4 sites.

On each of the 4 websites (websiteX.html) I would like to:

  • Set the language in which I would like my opening hours to display
  • Load iframe.html and have it display my opening hours in the language set and hide the opening hours in the language which is not set.

I imagine the structure of iframe.html to look something like:

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

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

I imagine the solution to this problem requires:

  • CSS and JavaScript in websiteX.html to set the language and display (hidden/shown) for the English/Danish sections of iframe.html
  • JavaScript in either websiteX.html and/or iframe.html to ensure that the option set in websiteX.html is inherited/pushed correctly to/from iframe.html so that the correct of iframe.html will be shown to the user.

I have not been able to find a solution to this problem and am unfortunately clueless about how to build a solution from the bottom myself.

Any help would be much appreciated.

Morten
  • 127
  • 1
  • 14
  • Is there some reason why u really want to use iframe instead of include(php)? I find iframes personally very annoying and unnecessary in most cases. – Ms. Nobody Jun 24 '13 at 13:58
  • Yes: I can't use php on the two subdomains where I will be hosting the pages. One is a Sharepoint intranet site, the other is a CMS (http://obvius.dk/). Both will allow me to use html and JavaScript, but php is not an option. – Morten Jun 25 '13 at 14:58

3 Answers3

0

Provide a GET parameter in the URL for the iFrame and allocate the language in it. Check the param to know which language is desired by the calling page.

i.e.:

thedomainofyouriframepage.tld/iframe.html?lang=EN

if you can't use a serverside script to switch the language via the GET param here is some issue which might help you

How to retrieve GET parameters from javascript?

UPDATE:

could look like this while using jQuery - set all lang div display:none:

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

//assuming the lang param is the first get param...

switch(lang){
    case 'de': $("div.german").show(); break;
//   ... other languages analogue
}
Community
  • 1
  • 1
helle
  • 11,183
  • 9
  • 56
  • 83
  • This looks like a useful solution. I am unfamiliar with using serverside scripting to switch languages in a document. Could you possible show me/link me the overall markup of iframe.html that would make be able to store information in two languages in this one document? – Morten Jun 24 '13 at 13:31
0

Put next tag in the <head> section of all your pages:

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

hours.js file should look tike this:

var hours = 15;

Possible values are any number or "quoted string".

Then put next tag whereever you want to output your opening hours:

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

Example:

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

Now you need to edit your opening hours only in one place: hours.js.

Egor Nepomnyaschih
  • 932
  • 1
  • 8
  • 13
  • The opening hours page contains quite complex information such as opening hours for different departments, phone and office hours, different locations etc. If I have understood your suggestion correctly, this solution will not work with the amount of information that I need to be able to display in two languages. – Morten Jun 24 '13 at 13:29
  • You can create as many variables as you need in your JavaScript. Use arrays to define list or table data http://www.w3schools.com/js/js_obj_array.asp. The big benefit of this solution is that your data will be really well-structured. – Egor Nepomnyaschih Jun 24 '13 at 14:31
0

You can use the jquery method .load() which loads data from the server and place the returned HTML into the matched element. See: http://api.jquery.com/load

Take into account that .load() method gets the resource via Ajax. Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.

Here you can find a useful ways to overcome the cross domain requests: Loading cross domain html page with jQuery AJAX

Now we are going to see an example:
Assuming that you have a page named 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>

... and you have another file named lang.html which is just a view with the html: 

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

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

... and some css to add 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;
}

Now, I will load the content of lang.html into the content section in index.html using the jQuery.load() method.

//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);
}

As you can see, the only line that matters here is as follow: 

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

Community
  • 1
  • 1
jherax
  • 5,238
  • 5
  • 38
  • 50
  • Now I've stumbled into a problem again: I need to have the .load function work across domains because the internet and intranet sites are on different domains and I only want to have one lang.html file in one place. (The whole point of this is to only have to edit one document when our opening hours change.). Is there an uncomplicated way to do this? – Morten Jun 25 '13 at 10:25
  • It seems that Chrome is also having trouble with this method, even if index.html and lang.html are on the same domain... Works fine in Firefox and IE10. – Morten Jun 25 '13 at 10:42
  • Apparently Chrome has issues with files hosted from the file system, and the **Same Origin Policy** _(file: protocol)_ but you may find it works if you upload it to a web server. It's the "same origin policy" as interpreted by Chrome (or a bug with the same effect). For local system you may try running Chrome with **--allow-file-access-from-files**. See: [jQuery .load() not working in Chrome](http://stackoverflow.com/questions/2990518/jquery-load-not-working-in-chrome) – jherax Jun 25 '13 at 13:17
  • Yes: Confirmed as working in Chrome when loading the page on a web server. Now only the "cross domain" problem is left. I'm trying to explore the problem, especially http://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy seems relevant, but I still haven't found a good solution (that I know how to implement). – Morten Jun 25 '13 at 13:29
  • I tried using document.domain (described on http://www.slideshare.net/SlexAxton/breaking-the-cross-domain-barrier) but lang.html is going to reside on a subdomain, which I think is the reason this solution will not work. Example URIs are asubdomain.domain.com/index.html while lang.html will reside on anothersubdomain.domain.com/lang.html. – Morten Jun 25 '13 at 14:45
  • I have been watching 3 easy solutions. All of them is recommended not load valuable/sensible data from external site either the source site. Here we go: **[1] -** [Cross Domain AJAX Request with YQL and jQuery](http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-cross-domain-ajax-request-with-yql-and-jquery/)... **[2] -** [Cross domain mod for jQuery](http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/)... and **[3] -** [Whatever Origin](http://whateverorigin.org/)... – jherax Jun 25 '13 at 15:11
  • ... and here are a good slideshare that I found: **[Breaking The Cross Domain Barrier](http://www.slideshare.net/SlexAxton/breaking-the-cross-domain-barrier)** – jherax Jun 25 '13 at 15:27
  • Thanks a lot for all your help. I managed to make the first [1] YQL solution work, but this resulted in a new problem. I am now calling "requestCrossDomain('lang.html', function(results) { $('#dynamic-content').html(results); });" and this works across domains. My problem now is getting the .load functionality back where I can call only the Danish language parts of "lang.html #danish". An alternative solution could be to edit the YQL call in the .js-file to only grab the Danish language divs from lang.html, but this I am also unsure about how to do. – Morten Jun 28 '13 at 10:19
  • **[Cross Domain AJAX Request with YQL and jQuery](http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-cross-domain-ajax-request-with-yql-and-jquery/):** In the `function requestCrossDomain(...)` after line #8 add this: `if (!(/^http/).test(site)) { /*call ajax.load();*/ return false; }` – jherax Jun 28 '13 at 13:23
  • I am extremely grateful for all your help. With that addition to the script file, how does the function in index.html that loads (absolute URI due to the cross domain issue) "http://subdomain.domain.com/lang.html #danish" look? I know I have to call "requestCrossDomain" to activate the YQL query in the script, but I'm stumped as to how I can build the jquery .load function into this? (I have also experimented with just changing the YQL query in the script to add `and xpath='//div[@id="danish"]/div'` to the query, but whereever I try to add this in the script file it doesn't seem to work. – Morten Jun 28 '13 at 15:07
  • Here you can find a useful ways to overcome the **cross domain requests: [Loading cross domain html page with jQuery AJAX](http://stackoverflow.com/a/17299796/2247494)** – jherax Oct 26 '14 at 16:03