Question

我有一个MVC项目，其视图名为Index.cshtml。我有一个动态创建的iFrame（将其HTML创建为一个字符串，然后附加到div的.html（）中），其内容会根据用户从另一个div表中的选择而变化。

这是我的问题：iFrame中的内容显示不正确。例如，显示了一个大图像，但是我需要在iframe中滚动以查看其余图像。或者，显示了一个视频，但它的尺寸很小（被黑色粗边框包围，未安装到iframe中）。现在，我将iframe的宽度和高度设置为父div的100％。另外，iframe的内容是动态的。含义：根据用户从表中选择的内容，内容可以是图片，视频或文档。这意味着我无法控制iframe中生成的HTML。

以下是示例代码，可帮助产生我的问题：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="x-ua-compatible" content="IE=10" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>Kitty Cat</title>

</head>

<body style="font-family: Calibri; font-size: 18px !important; font-weight: normal">
    <div>
        <div id="MrData" style="width: 500px; height: 500px">
            <div id="divData">
                <iframe id="theiframe" src="https://i.imgur.com/0XHcPko.jpg" frameborder="5" style="width:100%; height: 100%" scrolling="no" allowfullscreen></iframe>
            </div>
        </div>
    </div>
</body>

如果运行此页面，则将显示猫的图像，但只显示该图像的左上角。请记住，我禁用了滚动，因为我试图强制任何内容完全显示而不是必须滚动。

如何使div中的内容变小或变大，以使其完全显示在iframe中？

Answer 1

将此添加到您的部分：

<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

然后将您的iframe更改为此：

<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />

在iFrame中放置内容（图像，文档，视频）

1 个答案: