Перекрестный домен JavaScript Связь

Question

Вот ситуация. У моих клиентов будут свои собственные веб-страницы. На этой странице у них может быть iFrame, в котором они могут показать страницу, расположенную на моем сервере. Вне iFrame у них были бы простые кнопки, которые при нажатии должны выполнять javascript-функции в iFrame.

Так в основном код веб-страницы клиента на домене клиента будет что-то вроде этого

<input type="button" value="Say Hi" id="TestButton"> 
<iframe src="myserver.com/some_html_page.htm" width="800" height="550"></iframe> 

И код myserver.com/some_html_page.htm будет

$("#TestButton").click(function(){ 
    alert("Hi"); 
}); 

Я мой Reserach и я осведомлен о Проблемы с безопасностью браузера, но я хочу знать, есть ли способ справиться с этим, может быть с json или что-то в этом роде?

Answer 1

Одна из распространенных моделей выполнения междоменных запросов, используется JSONP.

Answer 2

Вы можете попробовать этот JQuery плагин из Бен Alman, предоставляя вам может быть плагин работает на оба ваших, и ваши клиент сервера - смотрите примеры для способов выполнения JS междоменных:

http://benalman.com/code/projects/jquery-postmessage/docs/files/jquery-ba-postmessage-js.html

Answer 3

Давайте рассмотрим, если у вас есть функция под названием test(), который загружает под Iframe, то вы можете получить доступ к этой функции test() ниже

document.getElementsByName("name of iframe")[0].contentWindow.functionName() 

например

document.getElementsByName("iframe1")[0].contentWindow.test() 

Answer 4

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

Один из способов передачи сообщений между страницами. Это потребует, чтобы ваши клиенты включили дополнительный JavaScript в свою страницу, а также iFrame, который указывает на ваш сервер. Это поддерживается в собственном javascript с postMessage, но в том числе библиотека @Mark Price предлагает сделать вашу жизнь намного проще.

Так здесь идет пример:

Клиенты Страница:

... 
    <script type="text/javascript" src="jquery.min.js"></script> 
    <script type="text/javascript" src="jquery.postMessage.min.js"></script> 

    <script type="text/javascript">  
    $(document).ready(function() { 
     $("#TestButton").click(function(){ 
     jQuery.postMessage("say_hi", "myserver.com/some_html_page.htm"); 
     }); 
    }); 
    </script> 
</head> 

<input type="button" value="Say Hi" id="TestButton"> 
<iframe src="myserver.com/some_html_page.htm"></iframe> 

код на myserver.com/some_html_page.htm:

... 
    <script type="text/javascript" src="jquery.min.js"></script> 
    <script type="text/javascript" src="jquery.postMessage.min.js"></script> 

    <script type="text/javascript"> 
    // you will need to set this dynamically, perhaps by having your 
    // clients pass it into the URL of the iFrame, 
    // e.g. <iframe src="myserver.com/some_html_page.htm?source_url=.. 
    var source_origin = "clients_page.com/index.html"; 

    var messageHandler = function (data) { 
     // process 'data' to decide what action to take... 
     alert("Hi"); 
    }; 

    $.receiveMessage(messageHandler, source_origin); 
    </script> 
</head> 

Вероятно, было бы неплохо связать клиента код в единую библиотеку, которую они могли бы включить, поэтому ваши клиенты не обременены написанием собственного javascript.

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

Сообщите мне, если я смогу прояснить ситуацию и удачи! :)