Получите контент в iframe, чтобы использовать столько места, сколько ему нужно

Question

Я пытаюсь написать простой модальный диалог на основе JavaScript. Функция JavaScript берет содержимое, помещает его в новый iframe и добавляет iframe на страницу. До сих пор прекрасно работает, единственная проблема заключается в том, что содержимое диалога (например, таблицы) переносится, хотя на странице достаточно места.

Мне бы хотелось, чтобы содержимое диалогового окна, в моем случае таблицы, занимало столько места, сколько нужно, без переноса строк. Я перепробовал множество комбинаций настройки width / style.width в iframe и таблице. Ничто не помогло.

Вот код для отображения диалогового окна iframe:

function SimpleDialog() {

    this.domElement = document.createElement('iframe');
    this.domElement.setAttribute('style', 'border: 1px solid red; z-index: 201; position: absolute; top: 0px; left: 0px;');

    this.showWithContent = function(content) {

        document.getElementsByTagName('body')[0].appendChild(this.domElement);

        this.domElement.contentDocument.body.appendChild(content);

        var contentBody   =   this.domElement.contentDocument.body;
        contentBody.style.padding = '0px';
        contentBody.style.margin  = '0px';

        // Set the iframe size to the size of content.
        // However, content got wrapped already.
        this.domElement.style.height = content.offsetHeight + 'px';
        this.domElement.style.width  = content.offsetWidth  + 'px';

        this._centerOnScreen();
    };

    this._centerOnScreen = function() {
        this.domElement.style.left = window.pageXOffset + (window.innerWidth  / 2) - (this.domElement.offsetWidth  / 2) + 'px';
        this.domElement.style.top  = window.pageYOffset + (window.innerHeight / 2) - (this.domElement.offsetHeight / 2) + 'px';

    };
}

Вот код теста:

var table = document.createElement('table');
table.setAttribute('style', 'border: 1px solid black; width: 100%;');

table.innerHTML = "<tr><td style='font-size:40px;'>Hello world in big letters</td></tr><tr><td>second row</td></tr>";

var dialog = new SimpleDialog();

dialog.showWithContent(table);

Таблица отображается красиво по центру страницы, но слова в первой ячейке обернуты в две строки. Как заставить таблицу использовать столько места, сколько ей нужно (без использования white-space: nowrap;)

Заранее спасибо за любые предложения!

-Марк

РЕДАКТИРОВАТЬ. Причина, по которой я в первую очередь использую iframe, заключается в том, что стили CSS на главной странице не влияют на элементы внутри диалога. Например, страница, которая устанавливает цвет текста на красный, но я хочу, чтобы текст диалога оставался простым черным.

Answer 1

Ваш стол настроен на 100%, но 100% чего? Во время создания не существует определенной ширины чего-либо. Если вы укажете фиксированную ширину (т. Е. Не в процентах), то для content.offsetHeight и .offsetWidth будет что работать.

Answer 2

Если вы хотите, чтобы он был чисто «модальным» (чтобы пользователь не мог получить доступ к странице сзади), вам нужно, чтобы IFRAME занимал всю ширину и высоту главной страницы.

IFRAME не может «автоматически изменять размер» на основе своего контента, поэтому лучше всего было бы заполнить всю страницу IFRAME, а затем поместить DIV в IFRAME и центрировать DIV в IFRAME, чтобы расположить ваш контент. В отличие от IFRAME, DIV должен автоматически изменять размер, поэтому вы не получите никакого переноса.

Другим вариантом было бы вообще отказаться от использования IFRAME и просто использовать DIV, хотя в более старых браузерах иногда ВХОДЫ отображаются через DIV независимо от Z-индекса.

Также обратите внимание, что приведенный выше код не обязательно будет кроссбраузерно-совместимым, поскольку не все браузеры ссылаются на документ содержимого IFRAME одинаково.

РЕДАКТИРОВАТЬ: основываясь на ваших изменениях, не обращайте внимания на мое предложение вообще отказаться от IFRAME.