获取iframe中的内容以使用尽可能多的空间，因为它需要

我正在尝试编写一个简单的基于JavaScript的模式对话框。 JavaScript函数获取内容，将其放入新的iframe中并将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;）

在此先感谢您的任何建议！

马克

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

来源

2010-03-19 Mark

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

来源

2010-03-19 14:51:19 Robusto

是的，他指定表占用了IFRAME宽度的100％，但指定IFRAME应该是其内容的宽度。鸡肉或鸡蛋的情况。这个表格将会是IFRAME的默认宽度的100％（一个创建的时候没有明确的宽度），然后他的IFRAME将被调整到它已经是相同的大小.... – Graza 2010-03-19 14:57:22

如果你希望它是纯粹的“模态”（所以用户不能访问后面的页面），你会希望IFRAME占据主页面的整个宽度和高度。

一个IFRAME不能根据其内容“自动化”自己，因此最好的办法是用IFRAME填充整个页面，然后在IFRAME中放置一个DIV，并将IF放在IFRAME中定位内容。与IFRAME不同，DIV应该自动调整大小，所以你不会得到任何包装。

另一种选择是放弃使用IFRAME，只使用DIV，尽管在较旧的浏览器中，有时INPUT会通过DIV显示，而不考虑Z-Index。

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

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

来源

2010-03-19 14:52:33 Graza

获取iframe中的内容以使用尽可能多的空间，因为它需要

回答

相关问题