2015-06-22 7 views
2

При использовании iframe, как я могу получить значение атрибута из iframe в iframe?Получить атрибут Iframe из iframe

Вот мой код:

<iframe src="slideriframe.html" name="iframe_a" customAttr="example" style="border:none"></iframe> 

Вот что я в настоящее время:

alert(window.frameElement.getAttribute('customAttr')); 

Здесь ошибка:

Uncaught SecurityError: Failed to read the 'frame' property from 'Window': Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.

Благодаря

+0

Вы не можете, если iframe из другого домена. для других решений читайте другие ответы, представленные на SO, например. http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe – cari

+0

Причина, по которой вы видите эту ошибку, связана с [той же политикой происхождения] (https://en.wikipedia.org/ вики/Same-origin_policy). В чрезвычайно простых словах это означает, что вам не разрешен доступ к коду, который не принадлежит вам. Существует несколько способов смягчить эту политику, но вы можете больше узнать об этом на странице Wiki, с которой я связан. – icecub

ответ

0

Вам нужно используйте postMessage API, который обеспечивает простой способ взаимодействия между iFrame и его родителем. Вы отправите сообщение родителю, которое затем просмотрит значение и опубликует другое сообщение в iFrame.

Чтобы отправить сообщение на родительскую страницу, вы вызываете ее следующим образом.

parent.postMessage('Hello parent','http://origin-domain.com'); 

В другом направлении мы можем отправить сообщение в iFrame со следующим кодом.

var iframe = document.querySelector('iframe'); 
iframe.contentWindow.postMessage('Hello my child', 'http://remote-domain.com:8080'); 

Чтобы получить сообщение, создайте событие события для события сообщения.

function receiveMessage(event) 
{ 
    if (event.origin !== "http://remote-domain.com:8080") 
    return; 

    console.log(event.data); 
} 

if ('addEventListener' in window){ 
    window.addEventListener('message', receiveMessage, false); 
} else if ('attachEvent' in window){ //IE 
    window.attachEvent('onmessage', receiveMessage); 

В этих примерах используется свойство origin, чтобы ограничить отправку сообщения и проверить, откуда оно было. Можно указать *, чтобы разрешить отправку в любой домен, и в некоторых случаях вы можете принимать сообщения из любого домена. Однако, если вы это сделаете, вам необходимо рассмотреть последствия для безопасности и выполнить собственные проверки входящего сообщения, чтобы убедиться, что оно содержит ожидаемое. В этом случае iframe может разместить его высоту до '*', так как у нас может быть несколько родительских доменов. Однако рекомендуется проверять входящие сообщения от iFrame.

function isMessageFromIFrame(event,iframe){ 
    var 
     origin = event.origin, 
     src  = iframe.src; 

    if ((''+origin !== 'null') && (origin !== src.substr(0,origin.length))) { 
     throw new Error(
      'Unexpect message received from: ' + origin + 
      ' for ' + iframe.id + '. Message was: ' + event.data 
     ); 
    } 

    return true; 
} 
Смежные вопросы