Как получить позицию iframe относительно области просмотра верхнего окна? - PullRequest
3 голосов
/ 13 марта 2012

У меня html вот так:

<body>
    [some stuff]
    <iframe src="pageWithMyScript.html"></iframe>
    [more stuff]
</body>

Я хочу найти местоположение iframe относительно window.top (и / или top.document) из скрипта, работающего внутри iframe. (В идеале это было бы без каких-либо рамок, хотя я всегда могу разобраться, как они это делают.)

Ответы [ 3 ]

6 голосов
/ 13 марта 2012

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

/**
 * Calculate the offset of the given iframe relative to the top window.
 * - Walks up the iframe chain, checking the offset of each one till it reaches top
 * - Only works with friendly iframes. https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#Cross-origin_script_API_access 
 * - Takes into account scrolling, but comes up with a result relative to 
 *   top iframe, regardless of being visibile withing intervening frames.
 * 
 * @param window win    the iframe we're interested in (e.g. window)
 * @param object dims   an object containing the offset so far:
 *                          { left: [x], top: [y] }
 *                          (optional - initializes with 0,0 if undefined) 
 * @return dims object above
 */
var computeFrameOffset = function(win, dims) {
    // initialize our result variable
    if (typeof dims === 'undefined') {
        var dims = { top: 0, left: 0 };
    }

    // find our <iframe> tag within our parent window
    var frames = win.parent.document.getElementsByTagName('iframe');
    var frame;
    var found = false;

    for (var i=0, len=frames.length; i<len; i++) {
        frame = frames[i];
        if (frame.contentWindow == win) {
            found = true;
            break;
        }
    }

    // add the offset & recur up the frame chain
    if (found) {
        var rect = frame.getBoundingClientRect();
        dims.left += rect.left;
        dims.top += rect.top;
        if (win !== top) {
            computeFrameOffset(win.parent, dims);
        }
    }
    return dims;
};
1 голос
/ 07 августа 2015

Небольшая коррекция:

function computeFrameOffset(win, dims ) {
  dims = (typeof dims === 'undefined')?{ top: 0, left: 0}:dims;
  if (win !== top) {
      var rect = win.frameElement.getBoundingClientRect();
      dims.left += rect.left;
      dims.top += rect.top;
      dims = computeFrameOffset(win.parent, dims ); // recursion
  }
  return dims;
};
1 голос
/ 12 июня 2015

Немного проще, как это:

function computeFrameOffset(win, dims ) {
    dims = (typeof dims === 'undefined')?{ top: 0, left: 0}:dims;
    if (win !== top) {
        var rect = win.frameElement.getBoundingClientRect();
        dims.left += rect.left;
        dims.top += rect.top;
        computeFrameOffset(win.parent, dims );
    }
    return dims;
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...