2012-12-07 2 views
31

сценарий IFRAMEДоступ к переменной из родительского фрейма

<script type="text/javascript" > 
var a=5; 
</script> 

сценарий родительского окна

<script type="text/javascript" > 
function close() 
{ 
var check=document.getElementById("iframeid").contentDocument.a; 
alert(check) 
} 
</script> 

Я хочу, чтобы получить доступ к переменной, которая определяется внутри фрейма от родителя. Но приведенный выше код не работает должным образом, кто-нибудь может дать представление об этом.

+1

кросс-доменное ограничение? –

ответ

1

document.getElementById('ID_OF_IFRAME').document.getElementById('f1')

Обратите внимание, что ограничения междоменное будет по-прежнему применяться.

44

Использование contentWindow вместо contentDocument работает для меня:

var check = document.getElementById("iframeid").contentWindow.a; 

Кроме того, убедитесь, что домены совпадают, и что вы используете веб-сервер для тестирования (я получил предупреждение протокола при тестировании из файловой системы).

+0

Chrome: SecurityError: заблокирован кадр с источником «http://mydomain.com» от доступа к кадру с перекрестным началом. – Yevgen

+1

@Yevgen: у вас есть Access-Control-Allow-Origin, настроенный для того же самого источника. Если вам нужна информация из родительского окна, найдите postMessage и создайте прослушиватель событий сообщения. – jnoreiga

+0

@jnoreiga Можете ли вы разместить ссылку на более подробную информацию? благодаря! – Qwerty

3

сценарий IFRAME:

var a = 5; 
window.parent.postMessage(['varA', a], '*'); // put this in some sort of function, ready, or whatever - you can call it multiple times if you need to as the code in the parent is an eventListener 

сценарий родительского окна:

var b; 
// you might want to write these into if statements to make sure that e.data[0] is varA if you have multiple messages coming across 
if (typeof window.addEventListener != 'undefined') { 
    window.addEventListener('message', function(e) { 
     b = e.data[1]; 
    }, false); 
} else if (typeof window.attachEvent != 'undefined') { // this part is for IE8 
    window.attachEvent('onmessage', function(e) { 
     b = e.data; // you'll probably have to play around with this part as I can't remember exactly how it comes across in IE8 -- i think it will involve slice() iirc 
    }); 
} 

Большинство моих знаний по этой теме исходит от Ben Vinegar's talk on Seamless iFrames

Это междоменное "хорошо" метод справиться с этим. Я уверен, что есть некоторые дыры в безопасности, как и в любом месте в Интернете.

+0

Мужчины, которых вы спасли меня по нескольку часов, я нашел решение с postMessage, но не знал пропустить '' * ''из iframe, поскольку имя домена будет работать для файла: /// в chrome –

1

Смотрите, если это работает для вас:

я создал эту parent.html страницы и положить IFRAME в нем с вводом текста, который будет показывать значение, передаваемое из IFrame окна:

<html> 
    <head> 
    <title>IFrame Example</title> 
    <script language="javascript"> 
      function hello(string){ 
       var name=string 
       document.getElementById('myAnchor').value=name; 
      } 
    </script> 
    </head> 
    <body> 
     <iframe namne="iframe" id="iframe_id" src="inputForm.html" height="150" > 
     </iframe> 
     Name: <input type="text" id="myAnchor" > 
     </body> 
</html> 

и этот iframe content страница:

<html> 
    <head> 
    <title>IFrame Child Example</title> 
    </head> 
    <body> 
    <form name="frm2" > 
     <h1><font color="#000099">Input Form</font></h1> 
     <p>Name : </p><input type="text" name="resp" id="input" value=""/> 
     <input type="button" onclick="parent.hello(this.form.resp.value);" value="Submit" /> 
    </form> 
</body> 
</html> 

щелкнув по кнопке, я получу значение в своем родительском окне.

Играйте с ним, если вы получите что-то с этим.

12

Один из методов, который всегда работал надежно для меня, - это то, что iFrame дает родительской ссылке ссылку на свое собственное окно при первой загрузке. Затем родитель может получить доступ ко всем переменным через эту ссылку. Это требует, чтобы родитель загружался до iFrame, но для меня это обычно так.

Так в родительском

var iFrameWin; 

Тогда в плавающем фрейме в какой-то момент после того, как он загружен и поселился

parent.iFrameWin = window; //parent now has a ref to the iframe's window 

Тогда, в родительском, когда он хочет иметь глобальный содержимое Var из iFrame

alert(iFrameWin.ivar); // shows value if the global 'ivar' in the iFrame 
0

Вот как это делается SharePoint при передаче значений аргументов от родительского ветра to iframe. Это просто, но это работает.

<html> 
<body> 
    <iframe id="iframe1"></iframe> 
    <script type="text/javascript"> 
    var ifr = window.document.getElementById("iframe1"); 
    ifr.dialogArgs = "Hello from the other side."; 
    ifr.src = "iframeContent.html" 
    </script> 
</body> 
</html> 

Внутри iframeContent.html:

<html> 
<body> 
    <input type="button" value="Click Me!" onclick="alert(window.frameElement.dialogArgs);" /> 
</body> 
</html> 

Другой путь (доступ к ifr.dialogArgs из родительского окна после того, как его значение модифицируется в IFrame документе) также работает.

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