これは私が将来何百人もの人々を支援すると確信している質問です。しかし、このスクリプトはjQueryの能力を少し超えています。 jQueryの基本的なスキルがありますが、これを実行することはできません。jquery.ba-postmessageを使用したiframeの動的高さのクロスドメイン
基本的には、メインのウェブサイトに座るためにiFrame（別のドメインにホストされています）が必要です。私はiFrameを使いたくないのですが、私の状況では選択肢がありません！私はiframe内のボディの高さにリサイズするためにiFrameが必要です。
現在、Ben Alman jQuery postMessage pluginを使用していますが、これは可能なようです。しかし、現在の例では、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>
：私はiframeのコンテンツファイルでこれを入れている
これは私がこれまでに見つかったものです
は...
これは、サーバー上にあります私のウェブサイト
これはサーバー上にあります：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の高さを変更されていませんか？
また、ナビゲーション区域の#navで自分のサイトにトグルボタンが追加されています。私が必要とするのは高さです。
ネット上で実際のサンプルを見つけることができないので、これについての助けがあれば素晴らしいですね、ありがとう！
これはba-postmessage.jsスクリプトです。