تغيير حجم الإطار على أساس المحتوى

StackOverflow https://stackoverflow.com/questions/153152

  •  03-07-2019
  •  | 
  •  

سؤال

أنا أعمل على صفحة iGoogle مثل التطبيق.المحتوى من التطبيقات الأخرى (على المجالات الأخرى) يظهر باستخدام نوافذ الأطر المدمجة.

كيف يمكنني تغيير حجم إطارات iframe لتناسب ارتفاع نوافذ الأطر المدمجة' المحتوى ؟

حاولت فك شفرة جافا سكريبت تستخدم Google لكنه غموض و البحث على شبكة الإنترنت قد باءت بالفشل حتى الآن.

تحديث: يرجى ملاحظة أن المحتوى الذي يتم تحميله من المجالات الأخرى ، لذلك نفس سياسة المنشأ ينطبق.

هل كانت مفيدة؟

المحلول

كان لدينا هذا النوع من المشكلة ، ولكن بشكل طفيف في الاتجاه المعاكس إلى الوضع الخاص بك - كنا توفير iframed محتوى المواقع على المجالات الأخرى ، لذلك سياسة المنشأ نفسه أيضا قضية.بعد أن أمضى ساعات طويلة يتصفح google, نحن في نهاية المطاف وجدت (إلى حد ما..) الحل العملي الذي كنت قد تكون قادرة على التكيف مع الاحتياجات الخاصة بك.

هناك طريقة للالتفاف حول سياسة المنشأ نفسه ، ولكن ذلك يتطلب إجراء تغييرات على كل من iframed المحتوى و تأطير الصفحة ، حتى إذا لم يكن لديك القدرة على طلب تغييرات على كلا الجانبين ، هذه الطريقة لن تكون مفيدة جدا لك ، أنا خائف.

هناك متصفح شاءت مما يسمح لنا تنورة سياسة المنشأ نفسه - جافا سكريبت يمكن التواصل سواء مع الصفحات على المجال الخاص به أو مع صفحات وقد iframed ، ولكن أبدا الصفحات التي تم تأطير مثلإذا كان لديك:

 www.foo.com/home.html, which iframes
 |-> www.bar.net/framed.html, which iframes
     |-> www.foo.com/helper.html

ثم home.html يمكن التواصل مع framed.html (iframed) ، helper.html (في نفس المجال). 

 Communication options for each page:
 +-------------------------+-----------+-------------+-------------+
 |                         | home.html | framed.html | helper.html |
 +-------------------------+-----------+-------------+-------------+
 | www.foo.com/home.html   |    N/A    |     YES     |     YES     |
 | www.bar.net/framed.html |    NO     |     N/A     |     YES     |
 | www.foo.com/helper.html |    YES    |     YES     |     N/A     |
 +-------------------------+-----------+-------------+-------------+

framed.html يمكن إرسال الرسائل إلى helper.html (iframed) ولكن لا home.html (الطفل لا يمكن التواصل عبر المجال مع الوالدين).

المفتاح هنا هو أن helper.html يمكن أن تتلقى رسائل من framed.html, ، يمكن أيضا التواصل مع home.html.

لذلك أساسا ، عندما framed.html الأحمال الأمور الخاصة الارتفاع ، يقول helper.html, الذي يمر رسالة إلى home.html, والتي يمكن بعد ذلك تغيير حجم الإطار الذي framed.html يجلس.

أبسط طريقة وجدنا لتمرير الرسائل من framed.html إلى helper.html كان من خلال URL الحجة.للقيام بذلك ، framed.html وقد iframe مع src='' المحدد.عندما onload حرائق ويقيم الخاصة الارتفاع ، ويحدد src iframe في هذه النقطة helper.html?height=N

هناك تفسير هنا كيف facebook التعامل معها ، والتي قد يكون قليلا أكثر وضوحا من الألغام أعلاه!

رمز

في www.foo.com/home.html, التالية شفرة جافا سكريبت المطلوبة (يمكن تحميلها من .js الملفات في أي مجال ، بالمناسبة..):

<script>
  // Resize iframe to full height
  function resizeIframe(height)
  {
    // "+60" is a general rule of thumb to allow for differences in
    // IE & and FF height reporting, can be adjusted as required..
    document.getElementById('frame_name_here').height = parseInt(height)+60;
  }
</script>
<iframe id='frame_name_here' src='http://www.bar.net/framed.html'></iframe>

في www.bar.net/framed.html:

<body onload="iframeResizePipe()">
<iframe id="helpframe" src='' height='0' width='0' frameborder='0'></iframe>

<script type="text/javascript">
  function iframeResizePipe()
  {
     // What's the page height?
     var height = document.body.scrollHeight;

     // Going to 'pipe' the data to the parent through the helpframe..
     var pipe = document.getElementById('helpframe');

     // Cachebuster a precaution here to stop browser caching interfering
     pipe.src = 'http://www.foo.com/helper.html?height='+height+'&cacheb='+Math.random();

  }
</script>

محتويات www.foo.com/helper.html:

<html> 
<!-- 
This page is on the same domain as the parent, so can
communicate with it to order the iframe window resizing
to fit the content 
--> 
  <body onload="parentIframeResize()"> 
    <script> 
      // Tell the parent iframe what height the iframe needs to be
      function parentIframeResize()
      {
         var height = getParam('height');
         // This works as our parent's parent is on our domain..
         parent.parent.resizeIframe(height);
      }

      // Helper function, parse param from request string
      function getParam( name )
      {
        name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var regexS = "[\\?&]"+name+"=([^&#]*)";
        var regex = new RegExp( regexS );
        var results = regex.exec( window.location.href );
        if( results == null )
          return "";
        else
          return results[1];
      }
    </script> 
  </body> 
</html>

نصائح أخرى

إذا كنت لا تحتاج إلى التعامل مع iframe المحتوى من مجال مختلف ، حاول هذا القانون ، فإنه سيتم حل المشكلة تماما و انها بسيطة:

<script language="JavaScript">
<!--
function autoResize(id){
    var newheight;
    var newwidth;

    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
        newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
    }

    document.getElementById(id).height= (newheight) + "px";
    document.getElementById(id).width= (newwidth) + "px";
}
//-->
</script>

<iframe src="usagelogs/default.aspx" width="100%" height="200px" id="iframe1" marginheight="0" frameborder="0" onLoad="autoResize('iframe1');"></iframe>

https://developer.mozilla.org/en/DOM/window.postMessage

نافذة.postMessage()

نافذة.postMessage هو طريقة بأمان تمكن عبر مصدر الاتصال.عادة النصوص على صفحات مختلفة يسمح فقط للوصول إلى بعضها البعض إذا وفقط إذا كانت الصفحات التي أعدم بها في المواقع مع نفس البروتوكول (عادة كل http) أو رقم المنفذ (80 يجري الافتراضي http) و المضيف (modulo الوثيقة.المجال يتم تعيين كل الصفحات نفس القيمة).نافذة.postMessage يوفر آلية التحكم فيه للتحايل على هذا التقييد بطريقة آمنة عند استخدامها بشكل صحيح.

ملخص

نافذة.postMessage عندما دعا ، يؤدي MessageEvent أن ترسل في الهدف نافذة عند أي انتظار السيناريو الذي يجب أن يتم تنفيذ يكمل (مثلا ، تبقى معالجات الأحداث إذا كانت نافذة.postMessage يسمى من معالج حدث سابقا-تعيين انتظار مهلة ، إلخ.).على MessageEvent لديه نوع الرسالة بيانات المنشأة التي يتم تعيين إلى سلسلة قيمة الوسيطة الأولى التي قدمت إلى النافذة.postMessage, أصل الملكية المقابلة أصل الوثيقة الرئيسية في النافذة واصفا النافذة.postMessage في نافذة الوقت.postMessage كان يسمى ، مصدر الممتلكات التي هي نافذة من أي نافذة.postMessage يسمى.(القياسية الأخرى خصائص الأحداث الحالية مع القيم المتوقعة.)

على iFrame-رسزر تستخدم المكتبة postMessage للحفاظ على iFrame الحجم إلى المحتوى ، جنبا إلى جنب مع MutationObserver للكشف عن التغيرات في المحتوى و لا تعتمد على مسج.

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

مسج:عبر المجال البرمجة الخير

http://benalman.com/projects/jquery-postmessage-plugin/

وقد demo حجم الإطار من النافذة...

http://benalman.com/code/projects/jquery-postmessage/examples/iframe/

يوضح هذا المقال كيفية إزالة الاعتماد على مسج...بالإضافة إلى الكثير من المعلومات المفيدة و وصلات إلى حلول أخرى.

http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/

المجردة سبيل المثال...

http://onlineaspect.com/uploads/postmessage/parent.html

HTML 5 العمل على مشروع النافذة.postMessage

http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html#crossDocumentMessages

John Resig على عبر نافذة الرسائل

http://ejohn.org/blog/cross-window-messaging/

أبسط طريقة باستخدام مسج:

$("iframe")
.attr({"scrolling": "no", "src":"http://www.someotherlink.com/"})
.load(function() {
    $(this).css("height", $(this).contents().height() + "px");
});

الحل على http://www.phinesolutions.com/use-jquery-to-adjust-the-iframe-height.html يعمل كبيرة (يستخدم مسج):

<script type=”text/javascript”>
  $(document).ready(function() {
    var theFrame = $(”#iFrameToAdjust”, parent.document.body);
    theFrame.height($(document.body).height() + 30);
  });
</script>

أنا لا أعرف أن كنت بحاجة إلى إضافة 30 على طول...1 عملت بالنسبة لي.

لمعلوماتك:إذا كان لديك بالفعل "ارتفاع" السمة على iFrame, هذا فقط يضيف style="height:xxx".هذا قد لا يكون ما تريد.

قد يكون قليلا في وقت متأخر ، كما كل الأجوبة الأخرى هم من كبار السن :-) ولكن...هيريس الحل.اختبار في الفعلية FF, كروم و سفاري 5.0.

css:

iframe {border:0; overflow:hidden;}

جافا سكريبت:

$(document).ready(function(){
    $("iframe").load( function () {
        var c = (this.contentWindow || this.contentDocument);
        if (c.document) d = c.document;
        var ih = $(d).outerHeight();
        var iw = $(d).outerWidth();
        $(this).css({
            height: ih,
            width: iw
        });
    });
});

نأمل أن يكون هذا سوف يساعد أي شخص.

أخيرا وجدت بعض الحلول الأخرى لإرسال البيانات إلى الأصل موقع من الإطار باستخدام window.postMessage(message, targetOrigin);.أنا هنا شرح كيف فعلت.

الموقع = http://foo.com الموقع B = http://bar.com

SiteB هو التحميل داخل siteA الموقع

SiteB موقع هذا الخط

window.parent.postMessage("Hello From IFrame", "*");

أو

window.parent.postMessage("Hello From IFrame", "http://foo.com");

ثم siteA هذا البرمجية التالية

// Here "addEventListener" is for standards-compliant web browsers and "attachEvent" is for IE Browsers.
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];


var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child IFrame window
eventer(messageEvent, function (e) {
   alert(e.data);
   // Do whatever you want to do with the data got from IFrame in Parent form.
}, false);

إذا كنت ترغب في إضافة اتصال الأمنية يمكنك استخدام هذا إذا كان الشرط في eventer(messageEvent, function (e) {})

if (e.origin == 'http://iframe.example.com') {
    alert(e.data); 
    // Do whatever you want to do with the data got from IFrame in Parent form.
}

IE

داخل الإطار:

 window.parent.postMessage('{"key":"value"}','*');

خارج:

 eventer(messageEvent, function (e) {
   var data = jQuery.parseJSON(e.data);
   doSomething(data.key);
 }, false);

هنا حل بسيط باستخدام ديناميكيا ورقة نمط خدم من قبل الملقم نفسه iframe المحتوى.ببساطة ورقة نمط "يعرف" ما هو في iframe يعرف أبعاد استخدام أسلوب iframe.وهذا يحصل في جميع أنحاء سياسة المنشأ نفسه من القيود.

http://www.8degrees.co.nz/2010/06/09/dynamically-resize-an-iframe-depending-on-its-content/

لذا الموردة كود iframe قد المصاحب ورقة نمط مثل ذلك...

<link href="http://your.site/path/to/css?contents_id=1234&dom_id=iframe_widget" rel="stylesheet" type="text/css" />
 <iframe id="iframe_widget" src="http://your.site/path/to/content?content_id=1234" frameborder="0" width="100%" scrolling="no"></iframe>

هذا لا يتطلب الخادم المنطق من جانب كونها قادرة على حساب الأبعاد المحتويات المقدمة iframe.

هذه الإجابة تنطبق فقط على المواقع التي تستخدم التمهيد.استجابة تضمين ميزة من التمهيد لا وظيفة.وهو يقوم على عرض (لا الارتفاع) من المحتوى.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/WsFWhL4Y84Y"></iframe>
</div>

jsfiddle: http://jsfiddle.net/00qggsjj/2/

http://getbootstrap.com/components/#responsive-embed

انا تنفيذ ConroyP هذا الإطار في إطار حل يحل محل الحل القائم على إعداد الوثيقة.المجال, ولكن وجدت أنه من الصعب جدا تحديد ارتفاع iframe المحتوى بشكل صحيح في المتصفحات المختلفة (اختبار مع FF11, Ch17 و IE9 الآن).

ConroyP يستخدم:

var height = document.body.scrollHeight;

ولكن هذا يعمل فقط على الصفحة الأولى من الحمل.بلدي iframe وقد المحتوى الديناميكي و أنا بحاجة إلى تغيير حجم الإطار على أحداث معينة.

ما انتهى به كان باستخدام مختلف شبيبة خصائص متصفحات مختلفة.

function getDim () {
    var body = document.body,
        html = document.documentElement;

    var bc = body.clientHeight;
    var bo = body.offsetHeight;
    var bs = body.scrollHeight;
    var hc = html.clientHeight;
    var ho = html.offsetHeight;
    var hs = html.scrollHeight;

    var h = Math.max(bc, bo, bs, hc, hs, ho);

    var bd = getBrowserData();

    // Select height property to use depending on browser
    if (bd.isGecko) {
        // FF 11
        h = hc;
    } else if (bd.isChrome) {
        // CH 17
        h = hc;
    } else if (bd.isIE) {
        // IE 9
        h = bs;
    }

    return h;
}

getBrowserData() هو متصفح الكشف عن وظيفة "مستوحاة" من قبل تحويلة الأساسية http://docs.sencha.com/core/source/Ext.html#method-Ext-apply

التي عملت بشكل جيد بالنسبة FF و IE ولكن بعد ذلك كانت هناك مشاكل مع كروم.واحدة من كانت مسألة توقيت ، على ما يبدو فإنه يأخذ كروم حين أن مجموعة/كشف هايت iframe.ثم الكروم أيضا لم يعد ارتفاع المحتوى في الإطار بشكل صحيح إذا iframe كان أعلى من المحتوى.هذا لن يعمل مع المحتوى الديناميكي عندما الارتفاع هو انخفاض.

لحل هذه أنا دائما مجموعة iframe على ارتفاع منخفض قبل أن يكشف محتوى ارتفاع ثم وضع iframe الارتفاع إلى القيمة الصحيحة.

function resize () {
    // Reset the iframes height to a low value.
    // Otherwise Chrome won't detect the content height of the iframe.
    setIframeHeight(150);

    // Delay getting the dimensions because Chrome needs
    // a few moments to get the correct height.
    setTimeout("getDimAndResize()", 100);
}

المدونة ليست الأمثل ، إنه من جمعة الاختبار :)

نأمل شخص ما تجد هذه مفيدة!

<html>
<head>
<script>
function frameSize(id){
var frameHeight;

document.getElementById(id).height=0 + "px";
if(document.getElementById){
    newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;    
}

document.getElementById(id).height= (frameHeight) + "px";
}
</script>
</head>

<body>

<iframe id="frame"  src="startframe.html" frameborder="0" marginheight="0" hspace=20     width="100%" 

onload="javascript:frameSize('frame');">

<p>This will work, but you need to host it on an http server, you can do it locally.    </p>
</body>
</html>

أدوات iGoogle يجب أن تعمل بنشاط على تنفيذ تغيير الحجم ، لذا أعتقد في عبر نموذج المجال لا يمكنك أن تفعل هذا دون المحتوى البعيد المشاركة في بعض الطريق.إذا كان المحتوى الخاص بك يمكن أن ترسل رسالة مع الحجم الجديد إلى الحاوية الصفحة باستخدام نموذجي عبر المجال تقنيات الاتصال ، ثم بقية بسيط.

عندما تريد تصغير صفحة ويب إلى أنها تناسب iframe الحجم:

  1. يجب تغيير حجم iframe ليتناسب مع المحتوى
  2. ثم يجب عليك تصغير كله iframe مع تحميل محتوى صفحة ويب

هنا مثال:

<div id="wrap">
   <IFRAME ID="frame" name="Main" src ="http://www.google.com" />
</div>

<style type="text/css">
    #wrap { width: 130px; height: 130px; padding: 0; overflow: hidden; }
    #frame { width: 900px; height: 600px; border: 1px solid black; }
    #frame { zoom:0.15; -moz-transform:scale(0.15);-moz-transform-origin: 0 0; }
</style>

وهنا مسج النهج الذي يضيف معلومات في json عبر سمة src iframe.وهنا demo, تغيير وانتقل من هذه النافذة..مما أدى url مع json يبدو مثل هذا...http://fiddle.jshell.net/zippyskippy/RJN3G/show/#{docHeight:5124,windowHeight:1019,scrollHeight:571}#

هنا هو رمز المصدر كمان http://jsfiddle.net/zippyskippy/RJN3G/

function updateLocation(){

    var loc = window.location.href;
    window.location.href = loc.replace(/#{.*}#/,"") 
        + "#{docHeight:"+$(document).height() 
        + ",windowHeight:"+$(window).height()
        + ",scrollHeight:"+$(window).scrollTop()
        +"}#";

};

//setInterval(updateLocation,500);

$(window).resize(updateLocation);
$(window).scroll(updateLocation);

الحصول على iframe ارتفاع المحتوى ثم تعطيه هذا iframe

 var iframes = document.getElementsByTagName("iframe");
 for(var i = 0, len = iframes.length; i<len; i++){
      window.frames[i].onload = function(_i){
           return function(){
                     iframes[_i].style.height = window.frames[_i].document.body.scrollHeight + "px";
                     }
      }(i);
 }

العمل مع مسج على الحمل (عبر متصفح):

 <iframe src="your_url" marginwidth="0"  marginheight="0" scrolling="No" frameborder="0"  hspace="0" vspace="0" id="containiframe" onload="loaderIframe();" height="100%"  width="100%"></iframe>

function loaderIframe(){
var heightIframe = $('#containiframe').contents().find('body').height();
$('#frame').css("height", heightFrame);
 }

على تغيير في استجابة الصفحة:

$(window).resize(function(){
if($('#containiframe').length !== 0) {
var heightIframe = $('#containiframe').contents().find('body').height();
 $('#frame').css("height", heightFrame);
}
});

باستخدام مسج:

parent.html

<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<style>
iframe {
    width: 100%;
    border: 1px solid black;
}
</style>
<script>
function foo(w, h) {
    $("iframe").css({width: w, height: h});
    return true;  // for debug purposes
}
</script>
<iframe src="child.html"></iframe>
</body>

child.html

<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function() {
    var w = $("#container").css("width");
    var h = $("#container").css("height");

    var req = parent.foo(w, h);
    console.log(req); // for debug purposes
});
</script>
<style>
body, html {
    margin: 0;
}
#container {
    width: 500px;
    height: 500px;
    background-color: red;
}
</style>
<div id="container"></div>
</body>

هذا صعب قليلا كما عليك أن تعرف عندما iframe تم تحميل الصفحة ، وهو difficuly عندما كنت لا في السيطرة على محتواه.من الممكن إضافة onload إلى iframe, ولكن لقد حاولت هذا في الماضي ولها مختلفة إلى حد كبير السلوك عبر المتصفحات (تخمين من هو أكثر مزعج...).غالبا سيكون لديك لإضافة وظيفة إلى iframe الصفحة التي يؤدي تغيير حجم وحقن بعض النصي في المحتوى إما أن يستمع لتحميل الأحداث أو تغيير حجم الأحداث التي ثم باستدعاء الدالة السابقة.أنا أفكر في إضافة وظيفة إلى الصفحة حيث تريد التأكد من آمن به, ولكن ليس لدي أي فكرة كيف سيكون من السهل القيام به.

شيء على غرار هذا انا اجد يجب أن تعمل.

parent.document.getElementById(iFrameID).style.height=framedPage.scrollHeight;

تحميل هذا مع جسمك onload على iframe المحتوى.

عندي حل سهل و يتطلب منك تحديد العرض والارتفاع في الرابط يرجى المحاولة (يعمل مع معظم المتصفحات):

<a href='#' onClick=" document.getElementById('myform').src='t2.htm';document.getElementById('myform').width='500px'; document.getElementById('myform').height='400px'; return false">500x400</a>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top