Я понимаю, что существует множество вопросов, связанных с Iframe, но я не смог найти решение, которое бы приспособило мою проблему главным образом из-за моей некомпетентности.Поэтому, пожалуйста, извините.
Я пытаюсь разместить несколько фреймов на одной странице, чтобы показать разные документы как часть серии.Проблема в том, что я не могу установить высоту iframe, что бы я ни делал.Вот мой MWE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<nav>
<ul class='nav'>
<li><a href="#" onclick="divVisibility('Div1');">Part 1</a></li>
<li><a href="#" onclick="divVisibility('Div2');">Part 2</a></li>
<li><a href="#" onclick="divVisibility('Div3');">Part 3</a></li>
<li><a href="#" onclick="divVisibility('Div4');">Part 4</a></li>
</ul>
</nav>
<div class="inner_div">
<div id="Div1">
<iframe class="ipython_notebook_frame" style="height: 500px; width: 100%; padding: 0; border: none; box-shadow: none; -webkit-box-shadow: none;" src="https://www.rparthiban.com/articles/wp-content/uploads/2018/05/Search-Algorithms-Part-1-Introduction.html" width="350" height="150">
</iframe>
</div>
<div id="Div2" style="display: none;">
<iframe class="ipython_notebook_frame" style="height: 500px; width: 100%; padding: 0; border: none; box-shadow: none; -webkit-box-shadow: none;" src="https://www.rparthiban.com/articles/wp-content/uploads/2018/05/Search-Algorithms-Part-2-BFS.html" width="350" height="150" ></iframe>
</div>
<div id="Div3" style="display: none;">Part 3 Page</div>
<div id="Div4" style="display: none;">Part 4 Page</div>
</div>
<script type='text/javascript'>
var divs = ["Div1", "Div2", "Div3", "Div4"];
var visibleDivId = null;
function divVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
div = document.getElementById(divId);
if(visibleDivId === divId) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
}
</script>
</body>
</html>
Вывод:
Контекст: я пытаюсь добавить это в WordPress и, как вы могли видеть, iframesтакже загружаются туда, поэтому не следует поднимать COR.Я показываю здесь как отдельный HTML только для MWE.Таким образом, jQuery в настоящее время также не работает (я думаю, что для использования встроенного в WordPress jQuery требуется отдельная обработка), не говоря уже о любой внешней среде, такой как angular.Я также удалил фрагменты кода, которые пытался загрузить и зафиксировать высоту iframe, поскольку ни один из них не работал.(все в javascript)
Обновление 1: Теперь я могу установить высоту, но только после нажатия.Как мне установить при начальной загрузке страницы (и после начальной загрузки iframe) через чистый JavaScript?Также, пожалуйста, внимательно изучите, можно ли оптимизировать этот скрипт.Я добавил жестко закодированное значение в MWE (и использовал ifrm.contentWindow.document.body.scrollHeight в WordPress вместе с
MWE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<nav>
<ul class='nav'>
<li><a href="#" onclick="ifrmVisibility(0);">Part 1</a></li>
<li><a href="#" onclick="ifrmVisibility(1);">Part 2</a></li>
</ul>
</nav>
<iframe id='ifrm_1' class="ipython_notebook_frame" style="height: 500px; width: 100%; padding: 0; border: none; box-shadow: none; -webkit-box-shadow: none;" src="https://www.rparthiban.com/articles/wp-content/uploads/2018/05/Search-Algorithms-Part-1-Introduction.html" width="350" height="150"></iframe>
<iframe id='ifrm_2' class="ipython_notebook_frame" style="display: none; height: 500px; width: 100%; padding: 0; border: none; box-shadow: none; -webkit-box-shadow: none;" src="https://www.rparthiban.com/articles/wp-content/uploads/2018/05/Search-Algorithms-Part-2-BFS.html" width="350" height="150" ></iframe>
<script type='text/javascript'>
var ifrmsID = ['ifrm_1', 'ifrm_2'];
var visibleifrmId = 0;
ifrm = document.getElementById(ifrmsID[i]);
ifrm.style.height = '700px'; // for MWE however this is not respected both here and in wordpress
function ifrmVisibility(id) {
if(visibleifrmId === id) {
visibleifrmId = 0;
} else {
visibleifrmId = id;
}
hideNonVisibleIfrms();
}
function hideNonVisibleIfrms() {
for(i = 0; i < ifrmsID.length; i++) {
ifrm = document.getElementById(ifrmsID[i]);
if(visibleifrmId === i) {
ifrm.style.display = 'block';
// ifrm.style.height = ifrm.contentWindow.document.body.scrollHeight + 'px';
// ifrm.style.width = ifrm.contentWindow.document.body.scrollWidth + 'px';
ifrm.style.height = '700px'; // for MWE
} else {
ifrm.style.display = 'none';
}
}
}
</script>
</body>
</html>
Вывод:
Сначалазагрузка страницы: 
После нажатия части 1 (примечание увеличения высоты):
