Блог

У меня есть скрипт, который расширяет ширину iframe, которая находится в таблице. Код работал раньше и работает в Internet Explorer. Функция javascript вызывается при нажатии на стрелку расширения.

Это табличный код:

 <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'; 
 }
  

Вот рабочая и не рабочая форма кода:

• рабочее расширение
• не работает

Расширение link working работает в IE, что действительно сбивает с толку.

Вы не можете задать style.width значение числа, оно должно быть строкой и включать px суффикс:

 iframeElement.style.height = "400px";
  

Редактировать: Также рассмотрите возможность кодирования угловых скобок в атрибуте alt вашего изображения. Это должно быть:

 <img alt="amp;<" ... />
<img alt="amp;>" ... />
  

Возможно, сейчас это не вызывает непосредственных проблем, но, безусловно, может возникнуть в обозримом будущем. Это уже портит форматирование кода SO. 🙂