Подгонка контента (изображений, документов, видео) внутри iFrame - PullRequest
0 голосов
/ 01 мая 2019

У меня есть проект MVC с View под названием Index.cshtml.У меня есть динамически созданный iFrame (его HTML создается в строке, затем добавляется к .html () элемента div), и его содержимое изменяется в зависимости от выбора пользователя из таблицы в другом элементе div.

ВотМоя проблема: содержимое внутри iFrame отображается неправильно.Например, показано большое изображение, но мне нужно прокрутить внутри фрейма, чтобы просмотреть остальную часть.Или видео показывается, но оно маленького размера (окружено толстой черной рамкой, не вписано в фрейм).Теперь я установил ширину и высоту iframe равными 100% родительского div.Кроме того, содержимое iframe является динамическим.Значение: в зависимости от того, что пользователь выбрал из таблицы, содержимое может быть изображение , видео или документ .Это означает, что я не имею никакого контроля над тем, какой HTML-код создается внутри iframe.

Вот пример кода, который поможет создать мою проблему:

<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?

1 Ответ

0 голосов
/ 01 мая 2019

Добавьте это в свой раздел:

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

И измените свой iframe на это:

<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...