Как получить положение X и Y iframe из iframe?

У меня есть iframe на документе. Используя javascript, я могу получить ширину и высоту iframe, а также ширину и высоту документа. Теперь мне нужно получить позицию x, y iframe в документе из iframe.Как получить положение X и Y iframe из iframe?

код что-то вроде:

<html> 
<iframe> 
var documentWidth = parent.window.innerWidth; 
var documentHeight = parent.window.innerHeight; 
var iframeWidth = window.innerWidth; 
var iframeHeight = window.innerHeight; 
var iframeX = ???? 
</iframe> 
<html>

Я попытался window.offsetTop/Left, parent.window.offsetTop/влево, window.clientTop, и т.д., и что-нибудь еще я могу найти, но получаю «неопределенная ».

Оба находятся на одном сервере, поэтому я не думаю, что у меня проблема с перекрестным доменом.

Любые идеи?

BTW Я не могу использовать JQuery для этого. Только JS.

Вот немного более подробно:

<html> 
<body> 
<div> 
<iframe name="iframe/123/Test"> 
<html> 
<body> 
<script src="same domain"></script> 
</body> 
</html> 
</iframe> 
</div> 
</body> 
</html>

Сценарий выглядит следующим образом до сих пор:

// JavaScript Document 
var documentWidth = parent.window.innerWidth; 
var documentHeight = parent.window.innerHeight; 
var iframeWidth = window.innerWidth; 
var iframeHeight = window.innerHeight; 
var iframeName = window.name; 
var iframeX = window.parent.document.getElementsByName(iframeName).offsetLeft; 

//Var Dumps 
document.write("Document Width: "+documentWidth+"<br>"); 
document.write("Document Height: "+documentHeight+"<br>"); 
document.write("Iframe Width: "+iframeWidth+"<br>"); 
document.write("Iframe Height: "+iframeHeight+"<br>"); 
document.write("Iframe X: "+iframeX+"<br>");

Я получаю следующие результаты на странице в IFRAME:

Document Width: 1566 
Document Height: 652 
Iframe Width: 300 
Iframe Height: 250 
Iframe X: undefined

источник

2015-02-12 Keith C.

Поскольку оба файла находятся на одном сервере, так что вы не имеете scross вопрос домена, вы можете попробовать следующее решение:

Главная Html

<html> 
<body> 
    <iframe src='iframe.html' name='iframe_name' id='iframe_id'></iframe> 
</body> 
</html>

Iframe код [iframe.html]:

<html> 
    <body> 
    <script type="text/javascript"> 
     var documentWidth = parent.window.innerWidth; 
     var documentHeight = parent.window.innerHeight; 
     var iframeWidth = window.innerWidth; 
     var iframeHeight = window.innerHeight; 
     // Get Left Position 
     var iframeX = window.parent.document.getElementById('iframe_id').offsetLeft; 
     // Get Top Position 
     var iframeY = window.parent.document.getElementById('iframe_id').offsetTop; 
    </script> 
    </body> 
</html>

источник

2015-02-12 03:23:57

Я попробовал window.parent.document.getElementsByName (iframeName) .offsetLeft; к сожалению. Я получаю имя с var iframeName = window.name; Я не думаю, что это проблема, хотя я даже попытался написать ее. –

в этом случае вы можете использовать window.parent.document.getElementsByName (iframeName) [0] .offsetTop и window.parent.document.getElementsByName (iframeName) [0] .offsetLeft –

Спасибо за постоянную помощь. Я изменил последнюю строку в JS до того, как var dumps на «var iframeX = window.parent.document.getElementsByName (iframeName) [0] .offsetLeft;" Теперь ни одна из дампов var не появляется, поэтому я предполагаю, что код должен быть разбит из-за [0]. Любая мысль о том, что может нарушить код? –

window.parent.document.getElementsByTagName('iframe') будет ссылаться на каждый iframe в окне родителя. Оттуда вы можете найти свой конкретный iframe, пройдя цикл и проверив атрибут src.

Как только у вас есть ваш iframe, вы можете получить его размеры и местоположения со свойствами от element.getBoundingRect().

var iframes = window.parent.document.getElementsByTagName('iframe'); 

var yourURL = 'test.com'; 
var iframe; 

for (var i = 0; i < iframes.length; i++) { 
    if (iframes[i].src == 'test.com') { 
     iframe = iframes[i]; 
     break; 
    } 
} 

var rect = iframe.getBoundingClientRect();

источник

2015-02-12 03:08:39 Eclecticist

Благодарим за подробный ответ. Я знаю имя iframe .. или как получить его по крайней мере .. поэтому я делаю это: var iframeName = window.name; var iframeX = window.parent.document.getElementsByName (iframeName) .getBoundingClientRect(); Однако, когда я добавляю «getBoundingClientRect();» мой скрипт ломается. Есть предположения? –

getBoundingClientRect() работает только с одним элементом. getElementsByName (iframeName) возвращает массив элементов. getElementsByName (iframeName) [0] .getBoundingClientRect() должен работать. – Fritzz

Я работаю с браузером на базе Chromium и объектами кадра не имеет метода getBoundingClientRect(). – Christoph

Как получить положение X и Y iframe из iframe?

ответ

Смежные вопросы