Перекрестная доменная высота iframe динамически

Я искал много примеров для высоты перекрестного домена iframe, но ни один из них не смог решить проблему.Перекрестная доменная высота iframe динамически

У меня есть простой HTML, приведенный ниже. Я хочу изменить размер iframe внутри него в соответствии с высотой содержимого.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 


</head> 

<body > 
<table width="780" height="406" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#333333" style="border:1"> 
    <tr> 
    <td valign="top"><table width="778" border="0" cellspacing="0" cellpadding="0"> 
    </td> 
    </tr>  
    </table> 


     <iframe src="http://mywebapplication.com" width="100%" ></iframe 

     <table width="780" border="0" cellpadding="0" cellspacing="0" bgcolor="53575f"> 
     <tr> 
      <td align="center" height="38"><span class="Footer">All Rights Reserved © ABC 2009-2012. 


      </td> 
     </tr> 
     </table></td> 
    </tr> 
</table> 
</body> 
</html>

Что я Пытался

с использованием второго файла JavaScript добавлен в IFRAME, чтобы отправить PostMessage обратно к родителю.

HTML страницы, содержащий IFrame

<iframe src="http://mywebapplication.com" width="100%" id="zino_iframe"></iframe> 
     <script type="text/javascript"> 
     var zino_resize = function (event) { 
      alert("sds"); 
      var zino_iframe = document.getElementById('zino_iframe'); 
       if (event.origin !== "http://hrcraft.noviavia.com") { 
       return; 
      } 
      //alert(zino_iframe); 
      if (zino_iframe) { 
       alert(event.data); 
       zino_iframe.style.height = event.data + "px"; 
      } 
     }; 
     if (window.addEventListener) { 
      window.addEventListener("message", zino_resize, false); 
     } else if (window.attachEvent) { 
      window.attachEvent("onmessage", zino_resize); 
     } 

window.addEventListener("message", myListener, false); 

function myListener(event) { 
    if (event.origin !== "http://hrcraft.noviavia.com") { 
     return; 
    } 
    //do something 
}

Функция для отправки высоты также добавляется на главной странице mywebapplication.

Я следуя этому примеру

http://zinoui.com/blog/cross-domain-iframe-resize

источник

2015-10-14 tushar narang

Является ли iframe в том же домене, что и родительская? – www139

НЕТ, поэтому я упомянул перекрестный домен –

В iframe содержится полноценное веб-приложение, такое как портал вакансий –

Хотя вопрос в отношении к решению вопроса с OP личным кодом. Их проверенная и проверенная библиотека может быть использована для решения проблемы изменения размера iframe на высоту содержимого. Эта библиотека имеет дело с перекрестным доменом, поэтому я думаю, что это стоит упомянуть.

https://davidjbradshaw.github.io/iframe-resizer/

вы поместите два файла один в родительском один в ребенке (IFrame)

в родителя:

<style>iframe{width:100%}</style> 
<iframe src="http://anotherdomain.com/iframe.html" scrolling="no"></iframe> 
<script>iFrameResize({log:true})</script>

В вашем детстве вы просто добавить этот файл:

iframeResizer.contentWindow.min.js

The lib rary заботится об изменении размера, а также о перекрестном домене. Проверьте документы.

источник

2017-03-26 23:17:33 MartinWebb

Спасибо, что было полезно, я обновил. – MartinWebb

Я не знаю, почему мой ответ проголосовал за то, что библиотека делает именно то, что пытается сделать OP, но это проверенное и используемое git repo. – MartinWebb

Перекрестная доменная высота iframe динамически

ответ

Смежные вопросы