当前我正在尝试在TabContent中加载Iframe。为什么在选择选项卡时未正确加载此外部网页？
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";
}
您得到一个错误(查看控制台(：
混合内容："处的页面是通过HTTPS加载的，但请求了一个不安全的帧"。此请求已被阻止；必须通过HTTPS提供内容。
为什么会出现错误
此错误是由浏览器发起的，出现的原因是安全页面(通过https加载(无法使用来自不安全来源(即通过http工作的资源(的资源(脚本、样式(。
因此，浏览器会阻止此类资源的下载，并在日志中报告。
此错误会影响什么
该错误导致网站无法加载所需的资源。
如果错误与js脚本的加载有关，那么加载该脚本的部分功能将无法在网站上运行。
如何修复错误
纠错本身非常简单：在连接第三方脚本和样式时，需要将http://替换为https://，但前提是第三方资源支持安全协议。如果它不支持它，那么从它下载是不可能的，你需要寻找其他解决方案来解决这个问题。
试试这个：
$("#siteloader").html("<iframe src='https://validator.w3.org/'></iframe>");