扩展表格和 iframe 的脚本答案

【问题标题】：Script to expand table and iframe扩展表格和 iframe 的脚本
【发布时间】：2011-08-04 20:57:54
【问题描述】：

我有一个扩展表格中 iframe 宽度的脚本。该代码以前工作过并在 Internet Explorer 中工作。 javascript函数调用展开箭头的onclick。

这是表格代码：

<table cellspacing="0" cellpadding="0" style="border: 1px solid #000000;">
    <tbody>
        <tr>
            <td style="background-color: rgb(232, 226, 210);border-bottom-style: solid;border-right-style:solid;border-width:1px;border-bottom-style:solid;border-width:1px;">
                <p class="headings">
                    iWannaGo.co Best Deals 
                    <a onClick="setContract()" title="Minimise Fares Window">
                    <img alt="<" width="20" height="20" src="/wp-content/themes/thesis_18/custom/images/left.png"></a>
                    Expand
                    <a onClick="setExpand()" title="Maximise Fares Window">
                        <img alt=">"  width="20" height="20" src="/wp-content/themes/thesis_18/custom/images/right.png" >
                    </a>
                </p>
            </td>
            <td style="background-color: rgb(232, 226, 210);border-bottom-style:solid;border-width:1px;">
                <p class="headings">Compare Recommended Sites</p>
            </td>
        </tr>
        <tr>
            <td id="fare" style="border-right-style:solid;border-width:1px;vertical-align:top;">
                <iframe src="<?php echo $search_fb; ?>" id="farebuzz" scrolling="auto" width=800 height=400 frameborder="0" align="left" style="overflow-x: hidden;padding-left:10px;padding-right:10px;"></iframe>
              </td>
            <td id="bwix">
                <iframe src="<?php echo $search_bw; ?>" id="bwiz" scrolling="auto" width=300 height=300 frameborder="0"  style=""> </iframe>
            </td>
        </tr>
    </tbody>
</table>

然后是javascript函数。

 function setExpand() {
      var iframeElement = parent.document.getElementById('farebuzz');
      var iframeElements = parent.document.getElementById('bwiz');
      var tableElement = document.getElementById('fare');  
      var tableElements = document.getElementById('bwix'); 
      iframeElement.style.height = 400; 
      iframeElement.style.width = 960;
      iframeElements.style.width=150;
      tableElement.style.width=960;
      tableElements.style.width=150; 
 }
 function setContract() {
      var iframeElement = parent.document.getElementById('farebuzz');
      var iframeElements = parent.document.getElementById('bwiz');
      var tableElement = document.getElementById('fare');  
      var tableElements = document.getElementById('bwix'); 
      iframeElement.style.height = 400;
      //100px or 100% 
      iframeElement.style.width = 800;
      //100px or 100% 
      tableElement.style.width=800;
      tableElements.style.width=300;
      iframeElements.style.width=300; 
 }
 function expanddiv() { 
      var padElements = document.getElementById('pad');  
      padElements.style.display='block'; 
 }

这是代码的工作和不工作形式：

链接工作扩展在 IE 中有效，这就是真的很混乱。

【问题讨论】：

标签： javascript iframe width expansion

【解决方案1】：

您不能将style.width 设置为数字，它必须是字符串并且必须包含px 后缀：

iframeElement.style.height = "400px";

编辑：另外，考虑在图像的 alt 属性中对尖括号进行编码。应该是：

<img alt="&lt;" ... />
<img alt="&gt;" ... />

现在这可能不会立即导致问题，但在可预见的将来肯定会。它已经弄乱了 SO 的代码格式。 :-)

【讨论】：