Question

我了解有多个与Iframe相关的问题，但是由于我的能力不足，我找不到适合自己问题的解决方案。所以，请原谅。

我试图将多个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中添加此代码，并且您可以看到iframe也已加载到那里，因此不应该出现CORs问题。我在这里显示为MWE的单独HTML。因此，jQuery目前也不起作用（我认为需要单独修改才能使用wordpress的集成jQuery），更不用说任何外部框架（如angular）了。我也删除了我尝试加载和捕获iframe高度的代码段，但没有一个起作用。（全部使用javascript）

更新1： 现在，我可以设置高度，但是只能在单击之后。如何通过纯JavaScript设置初始页面加载时（以及初始iframe加载后）？另外，请仔细检查该脚本是否可以进一步优化。我在MWE中添加了硬编码的值（并在wordpress中使用ifrm.contentWindow.document.body.scrollHeight。

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部分（注意增加高度）后：

如何根据iframe内容更新iframe及其父级的身高？

0 个答案: