Question

我有一个脚本可以扩展表格中的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中工作，这是什么真的很混乱。

Answer 1

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

iframeElement.style.height = "400px";

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

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

这可能不会立即造成问题，但在可预见的未来肯定会出现问题。它已经搞乱了SO的代码格式化。： - ）

用于扩展表和iframe的脚本

1 个答案: