Изменение размера динамического фрейма (проблема с Chrome) - PullRequest
Новая
       26

Изменение размера динамического фрейма (проблема с Chrome)

4 голосов
/ 15 декабря 2009

Итак, я осмотрел все остальные сообщения о переполнении стека и Google, чтобы узнать, как автоматически устанавливать высоту / ширину в iFrame. Я прошел через 15-20 из них, и никто до сих пор не работал для меня. Позвольте мне попытаться объяснить мою ситуацию:

Я динамически настраиваю тело iFrame на своей странице. Мне нужен iFrame, чтобы автоматически установить его высоту и ширину соответственно, чтобы весь текст был виден.

Мне нужно это для работы в IE (7 и 8), FireFox 3 и Chrome.

Вот другие проблемы, которые попадают в проблему:

  1. Я пишу в ASP.Net с главной страницей (поэтому элемент body исключен).
  2. Мне нужно установить текст iFrame для каждой обратной передачи с сервера.
  3. Мне нужен iFrame для изменения размера при изменении размера браузера.
  4. Все, что у меня есть, - это JavaScript, и ничего больше.

Я пишу все в одном домене, так что это не проблема.

Я чувствую, что то, что у меня сейчас есть, просто буровая установка и в любой момент развалится. В IE он отображается правильно, но в FireFox имеет огромное нижнее поле и совсем не отображается в Chrome (doc всегда равен нулю).

Вот оно (я старался быть как можно более подробным, дайте мне знать, если мне нужно объяснить больше): 

   <script type="text/javascript">
        function WriteIFrame()
        {
            // get the text i need to put in the iFrame (this is set from the server)
            var iFrameContent = document.getElementById("<%= hiddenIFrameContent.ClientID %>").value;
            var iFrameContainer = document.getElementById("divIFrameContainer");

            // create the new iFrame object
            var iFrame = document.createElement("iframe");
            iFrame.setAttribute("id", "myIFrame");
            iFrame.setAttribute("scrolling", "no");
            iFrame.setAttribute("frameborder", "0");

            // add the new iFrame object to the container div
            iFrameContainer.appendChild(iFrame);

            // find the correct inner document of the iFrame
            var doc = iFrame.document;
            if (doc == null && iFrame.contentDocument)
                doc = iFrame.contentDocument;
            //

            // write the information into the iFrame
            if (doc != null)
            {
                doc.open();
                doc.writeln(iFrameContent);
                doc.close();
            }

            // set the proper height
            var height = doc.body.scrollHeight + iFrameContainer.offsetTop;
            iFrame.setAttribute("style", "width: 100%; height: " + height + "px;");
        }

    </script>

    <div id="divIFrameContainer" oninit="WriteIFrame();">
    </div>

    <iframe id="HelperIFrame" style="display: none;" onload="WriteIFrame();"></iframe>
     <textarea id="hiddenIFrameContent" runat="server" style="display: none;" />

Ответы [ 2 ]

6 голосов
/ 15 декабря 2009

Welllll, после того, как возиться с этим пару часов, я наконец получил его на работу.

Просто, чтобы я сделал это очевидным, есть проблема синхронизации с Chrome. Если вы динамически устанавливаете содержимое iFrame при загрузке страницы, вам придется подождать несколько миллисекунд, прежде чем вы сможете правильно установить высоту. Вот почему я использовал функцию setTimeout, и она работала каждый раз для всех браузеров, если нет, иногда Chrome был бы вдвое больше, чем следовало бы.

Вот код, который я использовал, чтобы заставить его работать в IE, FF и Chrome: 

<script type="text/javascript">

    function OnIFrameLoad()
    {
        _frame = document.createElement("iframe");
        _frame.setAttribute("scrolling", "auto");
        _frame.setAttribute("frameborder", "0");
        _frame.setAttribute("style", "width: 100%;");
        _frame.style.width = "100%";

        document.getElementById("IFrameContainer").appendChild(_frame);

        _innerDoc = _frame.document;

        if (_frame.contentDocument)
            _innerDoc = _frame.contentDocument; // For NS6
        if (_frame.contentWindow)
            _innerDoc = _frame.contentWindow.document; // For IE5.5 and IE6
        //

        window.parent.SetIFrameContent();

        // We're calling the ResizeIFrame function after 10 milliseconds because when
        // Chrome shows the iframe, it takes a few moments to get the correct height.
        setTimeout("window.parent.ResizeIFrame()", 10);
    }

    function SetIFrameContent()
    {
        var content = document.getElementById("<%= hiddenIFrameContent.ClientID %>").value;

        _innerDoc.open();
        _innerDoc.writeln(content);
        _innerDoc.close();
    }

    function ResizeIFrame(frameId)
    {
        var objectToResize = (_frame.style) ? _frame.style : _frame;
        var innerDocBody = _innerDoc.body;

        var newHeight = _innerDoc.body.clientHeight;
        if (_innerDoc.body.scrollHeight > newHeight)
            newHeight = _innerDoc.body.scrollHeight;
        //

        objectToResize.height = newHeight + 40 + "px";
    }
</script>

ASP сторона: 

<textarea id="hiddenIFrameContent" runat="server" style="display:none;" />

<div id="IFrameContainer"></div>
1 голос
/ 15 марта 2011

Это убило меня, как и всех остальных, и я привел пример, который, кажется, совместим с IE8, Chrome, Safari и FF. Я не проверял это в IE7 или IE6.

Я не могу взять 100% кредита, потому что я получил кусочки с разных сайтов. Большинство решений, с которыми я столкнулся, усложнили проблему.

Я использую coldfusion, поэтому вам нужно проверить браузер на вашем родном языке. 

<SCRIPT LANGUAGE="JavaScript">
function resizeIframeToFitContent(iframe) {
    // This function resizes an IFrame object
    // to fit its content.
    // The IFrame tag must have a unique ID attribute.
    iframe.height = document.frames[iframe.id].document.body.scrollHeight + "px";}
</SCRIPT>

Если это FF, Safari или Mozilla (любая версия), вы можете использовать этот скрипт 

<SCRIPT LANGUAGE="JavaScript">
function resizeIframeToFitContent(iframe){
  //for some reason I have to reset the frame height to zero otherwise it will retain the height from the last 
  //click inside of the frame. You can set this to 0 or pick a good height so it only resizes when the content is larger than xx pixels
  var height = 780; 
  var theFrame = window.frames[iframe.id]; 
  //check your iframe.id to make sure you are getting back the correct id.
  theFrame.frameElement.height = height;
  //now lets get the height of the content and reset the height of the frame.
  height = parseInt(theFrame.document.body.scrollHeight);
  //now I have see this numerous times and many programmers try to set the frameElements.style.height attribute
  //that does not work in Safari, Chrome or FF so drop the style and you are good to go.
  theFrame.frameElement.height = height;
}
</SCRIPT>

IE8 немного приятнее для нас, программистов 

<SCRIPT LANGUAGE="JavaScript">
function resizeIframeToFitContent(iframe) {
    // This function resizes an IFrame object
    // to fit its content.
    // The IFrame tag must have a unique ID attribute.
    iframe.height = document.frames[iframe.id].document.body.scrollHeight;}
</SCRIPT>

Вот скрипт IFRAME, вы можете удалить цвет фона и установить собственную ширину и URL. 

<IFRAME id="myiframe" name="myiframe"
        src="<your url>"
        width=800
        style="background-color: #FAF9F8;"
        onload="resizeIframeToFitContent(this)" scrolling="no" frameborder="0">

Это в значительной степени покрывает это.

...