Question

我正在尝试编写一个简单的基于JavaScript的模式对话框。 JavaScript函数获取内容，将其放入新的iframe中并将iframe添加到页面中。到目前为止工作得很好，唯一的问题是对话框的内容（例如表格）被包装，尽管页面上有足够的空间。

我希望对话框的内容（在我的情况下是一个表格）可以根据需要使用尽可能多的空间，而不需要包装任何行。我在iframe和表上尝试了很多设置width / style.width的组合。什么都没有做到。

这里显示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;）

提前感谢任何建议！

-Mark

编辑：我首先使用iframe的原因是主页面中的CSS样式不会影响对话框中的元素。例如，一个将文本颜色设置为红色的页面，但我希望对话框文本保持纯黑色。

Answer 1

您的表格设置为100％，但100％是什么？在创建时，没有任何定义的宽度。如果指定固定宽度（即不是百分比），则content.offsetHeight和.offsetWidth将具有一些可用的功能。

Answer 2

如果您希望它纯粹是“模态”（因此用户无法访问后面的页面），您将希望IFRAME占据主页面的整个宽度和高度。

IFRAME无法根据其内容“自动调整”自身，因此您最好的选择是使用IFRAME填充整个页面，然后将DIV放入IFRAME中，并将DIV置于IFRAME中心以定位您的内容。与IFRAME不同，DIV应该自动调整大小，所以你不会得到任何包装。

另一种选择是完全放弃使用IFRAME而只使用DIV，但在旧版浏览器中，无论Z-Index如何，有时INPUT都会通过DIV显示。

另请注意，上述代码不一定兼容跨浏览器，因为并非所有浏览器都以相同方式引用IFRAME的内容文档。

编辑：根据你的编辑，忽略我的建议，完全放弃IFRAME。

获取iframe中的内容以使用所需的空间

2 个答案: