2015-02-05 2 views
-1

Я хотел бы динамически изменять размер iframes на основе размера контента от родителя. У меня есть доступ к родительским (исходным) и дочерним (целевым) веб-сайтам/серверам.Динамическое изменение размера iframes - перекрестный домен

Однако они являются междоменными серверами. Они оба находятся в разных областях. Я не знаю, как использовать jquery, но мне нужно это действительно срочно. Если есть, возможно, легко следовать учебнику!

Может кто-нибудь, пожалуйста, помогите мне.

Благодаря

+0

Я передал бы размер родительского iframe дочернему элементу, используя параметры get и загружая iframe с помощью js – talsibony

+0

Как я уже сказал, я новичок в этом, и я не знаю, как это сделать. Можете ли вы рассказать мне, как это сделать? Я встраиваю www.a.com в www.b.com. – Newbie

+0

[См. Эту статью] (http: // pipwerks.com/2008/11/30/iframes-and-cross-domain-security-part-2 /) - показывает трюк, который включает в себя создание фрейма внутри фрейма. Таким образом, 'www.b.com' имеет iframe, указывающий на' www.a.com', который имеет iframe, чей url генерируется через javascript, который указывает на 'www.b.com/setsize.php? Height = XXX & width = XXX' - 'XXX' является шириной/высотой документа на' www.b.com' (будь то scrollHeight, bodyHeight и т. Д.), А затем скрипт на setsize.php может делать такие вещи, как 'top.document.getElementById (" myIframe "). style.height = '500px;'' – nothingisnecessary

ответ

0

Я не уверен, может быть, вы можете сделать это, используя только CSS, но в случае, если вы хотите, чтобы передавать информацию между фреймами, что и у вас есть доступ и избежать перекрестных ошибок домена вы можете передавать данные в URL и обрабатывать их с помощью JS и JQuery позволяет предположить, этот файл является основным index.html

<iframe src="www.a.com/?width=330&height=220"></iframe> 

этот код из индекса фрейма

<iframe src="www.b.com"></iframe> 
    <script> 


function getParam(name) { 
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); 
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), 
      results = regex.exec(location.search); 
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); 
} 
    $(function(){ 
      $('iframe[src="www.b.com"]').width(getParam('width')).height(getParam('height')) 
    }); 
    </script> 
0

Вы можете попробовать использовать jQuery-плагин iframe resizer. Меня устраивает.

Просто скачайте эти файлы JS:

В вашей www.ADomain.com добавить этот блок кода в страницу, содержащую IFrame.

<script type="text/javascript" src="jquery-1.11.1.min.js"></script> 
<script type="text/javascript" src="iframeresizer.min.js"></script> 
<script type="text/javascript" src="iframeresizer.contentwindow.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#IframeID').iFrameResize({ 
      autoResize: true, 
      enablePublicMethods: false, 
      sizeWidth: false, 
      heightCalculationMethod: 'bodyScroll' 
     }); 
    }); 
</script> 


Тогда в вашем www.BDomain.com добавить этот блок кода на странице, которая будет загружен в IFRAME, чтобы избежать удара, что anoying ошибка называется «иногда мой IFrame не изменение размера» , Это создаст экземпляр resizer.

  1. Поместите эту библиотеку Jquery внутри <head> </head> части страницы.

    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>

  2. Поместите эту строку в последней части вашего кода перед </body>

    <script type="text/javascript" src="iframeresizer.contentwindow.min.js">

Надеется, что это поможет вам. Удачи бро!

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