Это вопрос, который, я уверен, поможет сотням людей в будущем.Но скрипт немного выходит за рамки моих возможностей jQuery.У меня есть базовые навыки jQuery, но я не могу с этим справиться.
В основном мне нужен iFrame (который размещен на отдельном домене), чтобы сидеть на моем главном веб-сайте.Я не хочу использовать iFrame, но в моей ситуации у меня нет выбора!Мне нужно, чтобы iFrame изменил размеры до высоты тела внутри iframe.
В настоящее время используется Бен Алман jQuery плагин postMessage , похоже, он может это сделать.Но в текущем примере есть ненужный код, который позволяет переключателю изменять размер iFrame ...
Мне не нужен этот переключатель, все, что мне нужно, это чтобы iFrame изменил размер до правильной высоты тела содержимого iframe.,Мне нужно, чтобы высота iframe корректировалась при изменении высоты тела внутри iframe.
Это то, что я нашел до сих пор ...
Я поместил это в файл содержимого iframe.Это на сервере: http://myiframecontent.com/
<script src="js/jquery.ba-postmessage.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// Get the parent page URL as it was passed in, for browsers that don't support
// window.postMessage (this URL could be hard-coded).
var parent_url = decodeURIComponent( document.location.hash.replace( /^#/, '' ) ),
link;
// The first param is serialized using $.param (if not a string) and passed to the
// parent window. If window.postMessage exists, the param is passed using that,
// otherwise it is passed in the location hash (that's why parent_url is required).
// The second param is the targetOrigin.
function setHeight() {
$.postMessage({ if_height: $('body').outerHeight( true ) }, parent_url, parent );
};
// Now that the DOM has been set up (and the height should be set) invoke setHeight.
setHeight();
// And for good measure, let's listen for a toggle_content message from the parent.
$.receiveMessage(function(e){
if ( e.data === 'toggle_content' ) {
link.triggerHandler( 'click' );
}
}, 'http://mywebsite.com' );
});
</script>
Я разместил это на своем сайте Это на сервере: http://mywebsite.com/
<script src="js/jquery.ba-postmessage.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// Keep track of the iframe height.
var if_height,
// Pass the parent page URL into the Iframe in a meaningful way (this URL could be
// passed via query string or hard coded into the child page, it depends on your needs).
src = 'http://myiframecontent.com/#' + encodeURIComponent( document.location.href ),
// Append the Iframe into the DOM.
iframe = $( '<iframe " src="' + src + '" width="1060" height="1000" scrolling="no" frameborder="0"><\/iframe>' )
.appendTo( '#iframe' );
// Setup a callback to handle the dispatched MessageEvent event. In cases where
// window.postMessage is supported, the passed event will have .data, .origin and
// .source properties. Otherwise, this will only have the .data property.
$.receiveMessage(function(e){
// Get the height from the passsed data.
var h = Number( e.data.replace( /.*if_height=(\d+)(?:&|$)/, '$1' ) );
if ( !isNaN( h ) && h > 0 && h !== if_height ) {
// Height has changed, update the iframe.
iframe.height( if_height = h );
}
// An optional origin URL (Ignored where window.postMessage is unsupported).
}, 'http://myiframecontent.com/' );
// And for good measure, let's send a toggle_content message to the child.
$( '<a href="#">Show / hide Iframe content<\/a>' )
.appendTo( '#nav' )
.click(function(){
$.postMessage( 'toggle_content', src, iframe.get(0).contentWindow );
return false;
});
});
</script>
<div id="iframe" class="clear"></div>
В настоящее время вышеприведенное возвращает текущую ширину 1060px, но не изменяет высоту моего iframe на высоту тела внутри моего iframe?
А также кнопка переключения добавляется на мой сайт в моей навигации div # nav,Когда все, что мне нужно, это высота.
Любая помощь по этому вопросу будет потрясающей, так как я не могу найти какие-либо рабочие примеры в сети, спасибо!
Это ba-postmessage.js script.