2012-01-15 8 views
2

iframeのサイズ変更について多くの質問がありましたが、それらのすべてが外部URLにアクセスできません。この場合、私はします。私はheadタグにスクリプトを挿入することができます。私は(私は開口部を知っていると終了フレームのタグが間違っているのiframeを含むメインページヘッダーに挿入されたこのスクリプトを使用しようとしていた - それは私がそれらを残すことはできないだろう:iframeのサイズを変更する - 外部のURLコードにアクセスする

iframe id="frame-one" scrolling="no" frameborder="0" src="yoursitehereexample"  onload="FrameManager.registerFrame(this)" /iframe 

これでJSヘッダー(リンクFrameManager.jsファイル)次に

var FrameManager = 
{ 
currentFrameId : '', 
currentFrameHeight : 0, 
lastFrameId : '', 
lastFrameHeight : 0, 
resizeTimerId : null, 

init : function() 
{ 
    if (FrameManager.resizeTimerId == null) 
    { 
     FrameManager.resizeTimerId = window.setInterval(FrameManager.resizeFrames, 500); 
    } 
}, 

resizeFrames : function() 
{ 
    FrameManager.retrieveFrameIdAndHeight(); 

    if ((FrameManager.currentFrameId != FrameManager.lastFrameId) || 
     (FrameManager.currentFrameHeight != FrameManager.lastFrameHeight)) 
    { 
     var iframe = document.getElementById(FrameManager.currentFrameId.toString()); 

     if (iframe == null) return; 

     iframe.style.height = FrameManager.currentFrameHeight.toString() + "px"; 

     FrameManager.lastFrameId = FrameManager.currentFrameId; 
     FrameManager.lastFrameHeight = FrameManager.currentFrameHeight; 
     window.location.hash = ''; 
    } 
}, 

retrieveFrameIdAndHeight : function() 
{ 
    if (window.location.hash.length == 0) return; 

    var hashValue = window.location.hash.substring(1); 

    if ((hashValue == null) || (hashValue.length == 0)) return; 

    var pairs = hashValue.split('&'); 

    if ((pairs != null) && (pairs.length > 0)) 
    { 
     for(var i = 0; i < pairs.length; i++) 
     { 
      var pair = pairs[i].split('='); 

      if ((pair != null) && (pair.length > 0)) 
      { 
       if (pair[0] == 'frameId') 
       { 
        if ((pair[1] != null) && (pair[1].length > 0)) 
        { 
         FrameManager.currentFrameId = pair[1]; 
        } 
       } 
       else if (pair[0] == 'height') 
       { 
        var height = parseInt(pair[1]); 

        if (!isNaN(height)) 
        { 
         FrameManager.currentFrameHeight = height; 
         FrameManager.currentFrameHeight += 15; 
        } 
       } 
      } 
     } 
    } 
}, 

registerFrame : function(frame) 
{ 
    var currentLocation = location.href; 
    var hashIndex = currentLocation.indexOf('#'); 

    if (hashIndex > -1) 
    { 
     currentLocation = currentLocation.substring(0, hashIndex); 
    } 

    frame.contentWindow.location = frame.src + '?frameId=' + frame.id + '#' + currentLocation; 
} 
}; 

window.setTimeout(FrameManager.init, 300); 

...私はリンクとしてフレームページのヘッダーResizeFrame.jsでこれを置く:

//orig frame mgr script 
$.getScript("http://www.yoursitehereexamle.com/js/FrameManager.js", function(){ 

}); 


// external heights load 

function publishHeight() 
{ 
if (window.location.hash.length == 0) return; 

var frameId = getFrameId(); 

if (frameId == '') return; 

var actualHeight = getBodyHeight(); 
var currentHeight = getViewPortHeight(); 

if (Math.abs(actualHeight - currentHeight) > 15) 
{ 
    var hostUrl = window.location.hash.substring(1); 

    hostUrl += "#"; 
    hostUrl += 'frameId=' + frameId; 
    hostUrl += '&'; 
    hostUrl += 'height=' + actualHeight.toString(); 

    window.top.location = hostUrl; 
} 
} 

function getFrameId() 
{ 
var qs = parseQueryString(window.location.href); 
var frameId = qs["frameId"]; 

var hashIndex = frameId.indexOf('#'); 

if (hashIndex > -1) 
{ 
    frameId = frameId.substring(0, hashIndex); 
} 

return frameId; 
} 

function getBodyHeight() 
{ 
var height; 
var scrollHeight; 
var offsetHeight; 

if (document.height) 
{ 
    height = document.height; 
} 
else if (document.body) 
{ 
    if (document.body.scrollHeight) 
    { 
     height = scrollHeight = document.body.scrollHeight; 
    } 
    if (document.body.offsetHeight) 
    { 
     height = offsetHeight = document.body.offsetHeight; 
    } 

    if (scrollHeight && offsetHeight) 
    { 
     height = Math.max(scrollHeight, offsetHeight); 
    } 
} 

return height; 
} 

function getViewPortHeight() 
{ 
var height = 0; 

if (window.innerHeight) 
{ 
    height = window.innerHeight - 18; 
} 
else if ((document.documentElement) && (document.documentElement.clientHeight)) 
{ 
    height = document.documentElement.clientHeight; 
} 
else if ((document.body) && (document.body.clientHeight)) 
{ 
    height = document.body.clientHeight; 
} 

return height; 
} 

function parseQueryString(url) 
{ 
url = new String(url); 
var queryStringValues = new Object(); 
var querystring = url.substring((url.indexOf('?') + 1), url.length); 
var querystringSplit = querystring.split('&'); 

for (i = 0; i < querystringSplit.length; i++) 
{ 
    var pair = querystringSplit[i].split('='); 
    var name = pair[0]; 
    var value = pair[1]; 

    queryStringValues[name] = value; 
} 

return queryStringValues; 
} 
// window load 
window.onload = function(event) 
    { 
     window.setInterval(publishHeight, 300); 
    } 

しかし、それはうまく動作することに運がない - 誰が私が間違っていたかを見ることができます。 iframeはまだ表示されますが、縮尺は変更されません。どうもありがとう!

答えて

0

ここに私のコードは、外部のウェブサイトでiframeのサイズを変更することです。親(iframeコード付き)ページと外部ウェブサイトにコードを挿入する必要があります。そのため、外部ウェブサイトを編集するアクセス権がない場合は機能しません。

  • ローカル(インラインフレーム)ページ:ちょうど
  • リモート(外部)ページをコードスニペットを挿入します。あなたは、「身体のonload」とすべての内容を保持している「DIV」が必要です。あなたはTwitterやFacebookのプラグインのような他の埋め込まコードの問題を回避するために、この「FRM」接頭辞を必要とする

    <IFRAME STYLE="width:100%;height:1px" SRC="http://www.remote-site.com/" FRAMEBORDER="no" BORDER="0" SCROLLING="no" ID="estframe"></IFRAME> 
    
    <SCRIPT> 
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; 
    var eventer = window[eventMethod]; 
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message"; 
    eventer(messageEvent,function(e) { 
        if (e.data.substring(0,3)=='frm') document.getElementById('estframe').style.height = e.data.substring(3) + 'px'; 
    },false); 
    </SCRIPT> 
    

    :ローカル

:と体が「0余白」にスタイリングする必要があります。プレーンページがある場合は、両方のページ(スクリプトとオンロード)で "if"と "frm"という接頭辞を削除できます。

リモート:

あなたは "本当の" ページの高さについて達成するためのjQueryを必要としています。 body.scrollHeightやrelatedを使用して高さを下げる(高い高さから低い高さに)ときに問題が発生するので、純粋なJavaScriptを使用する方法を理解できません。何らかの理由で、常に最大の高さを戻します(事前に寸法変更されています)。

<BODY onload="parent.postMessage('frm'+$('#master').height(),'*')" STYLE="margin:0"> 
<SCRIPT SRC="path-to-jquery/jquery.min.js"></SCRIPT> 
<DIV ID="master"> 
your content 
</DIV> 

親ページ(iframe)のデフォルトの高さは1pxです。スクリプトはiframeから「メッセージ/イベントの待機」を挿入します。メッセージ(投稿メッセージ)が受信され、最初の3文字が "frm"(上記の問題を避けるため)の場合、4番目の位置から番号を取得し、 'px'単位を含むiframeの高さ(スタイル)を設定します。

外部サイト(iframeに読み込まれます)は、 "frm"とメインdivの高さ(この場合は "master"というID)を持つ親(オープナー)に "メッセージを送信"します。ポストメッセージの「*」は「任意のソース」を意味します。

これが役に立ちます。私の英語のために申し訳ありません。

関連する問題