javascript - 创建动态 iframe 不会使其全高并剪切页面

Question

我正在制作一个搜索引擎，但我的 iframe 有一些问题。当用户点击进入时，一个 iframe 被创建。我希望 iFrame 获得所需的高度，以便与页面的其余部分融为一体。这是我的代码:

<input type="search" id="q" name="q"/>
<input type="submit" value="Search" onclick="submit(); return false;"/>

<script>
function submit() {
        page.innerHTML = '<iframe id="results" src="" frameborder="0" scrolling="no" style="overflow:hidden; overflow-x:hidden; overflow-y:hidden; height:150%; width:99%; position:absolute;" height="150%" width="99%" onload=""/>';
        document.getElementById('results').src = 'search.php?q=' + query + '&session=<?=$custom_session;?>&no-cache=' + Math.random();
}
</script>

这是脚本的简化版本。实际页面位于 - http://v1k.me/search/alpha/ 如果您查看 HTML，您将能够看到完整的代码。

如果您搜索“mobile”，结果将在第 9 个结果 ( http://i.imgur.com/jjZKCjC.png ) 处 chop ，但是如果您搜索“mail”，它将显示所有内容并停止在页面列表的中途。

Answer 1

试试这个:

<iframe id="results" src="" onload="autosize('results')"></iframe>

<script>
function autosize(ifrId){
  var ifr = document.getElementById(ifrId);
  var doc = ifr.contentDocument ? ifr.contentDocument : ifr.contentWindow.document;
  var obj = ifr.style ? ifr.style : ifr;
  obj.height = doc.body.scrollHeight + "px";
} 
</script>