Изменить размер iframe - иметь доступ к внешнему URL-коду - PullRequest
Новая
       24

Изменить размер iframe - иметь доступ к внешнему URL-коду

2 голосов
/ 16 января 2012

Я видел много вопросов об изменении размера iframes, но у всех них нет доступа к внешнему URL.В этом случае я делаю.Я могу вставить скрипт в тег head.Я пытался использовать этот скрипт, вставленный в заголовок главной страницы, содержащий iframe (я знаю, что теги открывающего и закрывающего фреймов неверны - это не позволило бы мне оставить их в: 

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 все еще появляется, но не масштабируется. Большое спасибо!

1 Ответ

0 голосов
/ 14 мая 2014

Вот мой код для изменения размера iframe с внешним веб-сайтом. Вам необходимо вставить код на родительскую (с кодом iframe) страницу, а также на внешний веб-сайт, так что это не будет работать, если у вас нет доступа для редактирования внешнего веб-сайта.

  • локальная страница (iframe): просто вставьте фрагмент кода
  • удаленная (внешняя) страница: вам нужны "onload body" и "div", который содержит все содержимое. И тело должно быть стилизовано под "margin: 0"

Местное время: 

<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>

Вам нужен этот префикс "frm", чтобы избежать проблем с другими встроенными кодами, такими как плагины Twitter или Facebook. Если у вас обычная страница, вы можете удалить префикс «if» и «frm» на обеих страницах (script и onload).

Пульт дистанционного управления:

Вам необходим jQuery для достижения "реальной" высоты страницы. Я не могу понять, как это сделать с чистым JavaScript, так как у вас будут проблемы при изменении высоты вниз (выше или ниже) с использованием body.scrollHeight или связанных с ним. По какой-то причине он всегда будет возвращать самую большую высоту (предварительно измеренную). 

<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) имеет высоту по умолчанию 1 пиксель. Скрипт вставляет «ожидание сообщения / события» из iframe. Когда сообщение (сообщение отправлено) получено, и первые 3 символа являются «frm» (чтобы избежать упомянутой проблемы), получит число из 4-й позиции и установит высоту iframe (стиль), включая единицу измерения «px».

Внешний сайт (загруженный в iframe) «отправит сообщение» родителю (открывателю) с «frm» и высотой основного div (в данном случае id «master»). «*» В пост-сообщении означает «любой источник».

Надеюсь, это поможет. Извините за мой английский.

...