完全加载外部 html 文件的问题答案

【问题标题】：Issues with fully loading an external html file完全加载外部 html 文件的问题
【发布时间】：2017-07-25 15:28:27
【问题描述】：

我在将 html 文件完全加载到我的 div 时遇到了一些问题。在阅读了这里的不同问题后，我意识到我应该使用 iframe 而不是试图弄乱 div、ajax 或 JS。这对我很有帮助，但是，在加载时它会在滚动框中返回页面：

我该如何解决这个问题？

下面的代码sn-ps：

这部分来自index.html：

<div class="blurbs" id="blurbs">
        <iframe id = "frame" width="100%" height="100%" frameborder="0" ></iframe>
    </div>

其余部分来自 1 月的 html 文件，该文件很大，仅包含所有信息，因此我不确定你们是否都需要查看它，因为我怀疑它与此有关。

这是点击一月时调用的javascript：

function load_january() {

    var ajaxCall = document.getElementById("frame");
    ajaxCall.setAttribute("src", "../HTML/months/january.html");
}

【问题讨论】：

所以你想hide the scrollbar?
我想，是的，也想将整个 html 加载到 iframe 中。所以实际上它仍然是如何从预先存在的文件中正确加载 html 文件的一部分。有点像 ajax。
如果我理解正确，它会加载没有样式的 html 文件。因此，您应该检查您尝试加载的 html 文件是否正确链接样式。
好吧，我不太关心样式，更关心的是将该文件的全部内容加载到我的 iframe/div 中

标签： javascript html css

【解决方案1】：

所以我通过使用 div 来解决这个问题，并调用 ajax 函数。目前，iframe 对我的 CSS 知识水平来说太麻烦了。

 $(document).ready(function() {
        $("#jan").click(function () {
            $.ajax({
                url: "../HTML/months/january.html", success: function (result) {
                    $("#blurb").html(result);
                }
            });
        });
    });

【讨论】：

【解决方案2】：

我认为您有兴趣调整 iframe 高度以匹配源 HTML 的高度。这样你就不会看到滚动条了。

这个问题已经在这里解决了： Adjust width height of iframe to fit with content in it

【讨论】：

我相信是的，我将如何引用该javascript？我应该将它嵌套在我的 load_january 方法中吗？独立功能？