Tab Content IFrame Not Loading

user_1819987 0
Viewed 140

Currently I am trying to load an Iframe within TabContent. Why is this external webpage not loading correctly when the tab is selected?

Fiddle: https://jsfiddle.net/hpjnkmz1/1/

HTML:

<!doctype html>

<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body>
    <div class="tab">
      <button class="tablinks" onclick="openCity(event, 'PageOne')">Page One</button>
      <button class="tablinks" onclick="openCity(event, 'PageTwo')">Page Two</button>
      <button class="tablinks" onclick="openCity(event, 'PageThree')">Page Three</button>
    </div>
    <div id="PageOne" class="tabcontent">
      <h3>London</h3>
      <p>London is the capital city of England.</p>
    </div>
    <div id="PageTwo" class="tabcontent">
      <h3>Paris</h3>
      <p>Paris is the capital of France.</p>
    </div>
    <div id="PageThree" class="tabcontent">
      <div id="siteloader"></div>
    </div>
  </body>

</html>

JavaScript:

function loadContent(id, url) {
  var node = document.getElementById(id);
  node.innerHTML = url;
}

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;

  if (cityName == 'PageThree') {
    alert("Load External Content");
    $("#siteloader").html('<iFrame src="http://validator.w3.org/">');
  }

  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
iframe html javascript
1 Answers

You get an error (look in the console):

Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure frame ''. This request has been blocked; the content must be served over HTTPS.

Why does the error appear?

This error was initiated by the browser and appears due to the fact that a secure page (loaded via https) cannot use resources (scripts, styles) from unsafe sources (i.e. those that work via http).

Therefore, the browser blocks the download of such resources and reports this in the log.

What does this error affect?

The error results in the site being unable to load the required resources.

If the error is related to the loading of js scripts, then part of the functionality for which this script is loaded will not work on the site.

How do I fix the error?

The error correction itself is very simple: you need to replace http:// with https:// when connecting third-party scripts and styles - but this is if the third-party resource supports a secure protocol. If it does not support it, then downloading from it is impossible, you need to look for other solutions to this problem.

Try this:

$("#siteloader").html("<iframe src='https://validator.w3.org/'></iframe>");
user_135734440
Related