首页 必观作品 SVG教程 SVG手册 关于 全部文章

使用HTML5中postMessage实现Ajax中的POST跨域问题

HTML5中提供了在网页文档之间相互接收与发送信息的功能。使用这个功能，只要获取到网页所在窗口对象的实例，不仅仅同源(域+端口号)的web网页之间可以互相通信，甚至可以实现跨域通信。

浏览器支持程度：IE8+，firefox4+，chrome8+ opera10+

1. 首先，要想接收从其他的窗口发过来的消息，就必须对窗口对象的message事件进行监听，如下代码：

window.addEventListener(“message”, function(){},false);

2. 其次，需要使用window对象的postMessage方法向其他窗口发送消息，该方法定义如下所示：

otherWindow.postMessage(message, targetOrigin);

该方法使用2个参数，第一个参数为所发送的消息文本，但也可以是任何javascript对象，第二个参数是接收消息的对象窗口的url地址(比 如：http:127.0.0.1:8080/) , 但是我们也可以在url地址字符串中使用通配符”*”, 指定全部的域下，但是我们还是建议使用特定的域名下，otherWindow为要发送窗口对象的引用。

Demo演示：

假如现在我在hosts文件下 ，绑定2 个域名如下：

127.0.0.1       abc.example.com

127.0.0.1        longen.example.com

现在假如在abc.example.com域下有一个abc.html页面，在longen.example.com域下有def.html页面，现在我是希望这2个不同域名下的页面能互相通信，abc.html代码如下：

<form>  
      <p>  
        <label for="message" style="color:red;font-size:24px;">给iframe子窗口发一个信息：</label>  
        <input type="text" name="message" value="send" id="message" />  
        <input type="submit" value="submit" id="submit"/>  
      </p>  
</form>  
<h4>目标iframe传来的信息：</h4>  
<p id="test">暂无信息</p> 

 <iframe id="iframe"  
    src="https://longen.example.com/webSocket/def.html" style="display:none"></iframe>

JS代码如下：

var win = document.getElementById("iframe").contentWindow;

document.getElementById("submit").onclick = function(e){
    e.preventDefault();
    win.postMessage(document.getElementById("message").value,"https://longen.example.com"); 
}  

window.addEventListener("message",function(e){
     e.preventDefault();
     document.getElementById("test").innerHTML = "从" + e.origin + "那里传过来的消息:\n" + e.data;
},false);

Def.html代码如下：

HTML代码：

<form>  
      <p>  
        <label for="message">给父窗口abc.html发个信息：</label>  
        <input type="text" name="message" value="send" id="message" />  
        <input type="submit" />  
      </p>  
 </form>  
 <p id="test2">暂无信息。</p>

JS代码如下：

var parentwin = window.parent; 
window.addEventListener("message",function(e){
       document.getElementById("test2").innerHTML = "从父窗口传来的域" +e.origin + "，和内容数据：" + e.data;  
       parentwin.postMessage('HI!你给我发了"<span>'+e.data+'"</span>。',"https://abc.example.com");
},false);

当我点击abc.html页面后，可以看到效果如下，从def.html返回内容了。如下：

241813045164605

我们需要知道如下几条信息：

  1. 通过对window对象的message事件进行监听，可以接收消息。
  2. 通过访问message事件的origin属性，可以获取消息的发送源。
  3. 通过访问message事件的data属性，可以取得消息内容。
  4. 使用postMessage方法发送消息。
  5. 通过访问message事件的source属性，可以获取消息发送源的窗口对象(准确的说，应该是窗口的代理对象)。

有了上面的基本知识点，我们可以延伸为实现ajax POST跨域的问题。

二：使用postMessage 知识点解决 ajax中POST跨域问题。

原理：原理也很简单，假如我们的域名abc.example.com下的abc.html页面需要发ajax请求(跨域，域名为 longen.example.com)下，那么我们还是先跨页面文档的形式，和上面一样，我们可以现在longen.example.com下 建立一个页面，比如叫def.html. 那么我们现在还是在 abc.html 页面嵌入一个隐藏域iframe src路径指向longen.example.com域下def,html页面。过程还是和跨文档类似，只是现在在def.html页面中 在window.onmessage 事件内写ajax请求即可，如下代码：

abc.example.com下的abc.html页面如下：

html代码和上面一样，下面是JS代码：

var win = document.getElementById("iframe").contentWindow;

document.getElementById("submit").onclick = function(e){
      e.preventDefault();
      win.postMessage(document.getElementById("message").value,"https://longen.example.com/"); 
}  

window.addEventListener("message",function(e){
    e.preventDefault();
    alert(typeof e.data)
    var json = JSON.parse(e.data);
     console.log(json);
    alert(json.url)
},false);

def.html代码如下：

JS代码如下：

//获取跨域数据  
window.onmessage = function(e){  
     $.ajax({
          url: 'https://longen.example.com/webSocket/test.php',
          type:'POST',
          dataType:'text',
          //data: {msg:e.data},
          success: function(res) {
               var parentwin = window.parent;  
               parentwin.postMessage(res,"https://abc.example.com");//跨域发送数据  
          }
      });
 };

test.php代码如下：

<?php 
    $data=array(  
     url =>1,
      name =>'2',
      'xx-xx'=>"xx"
 );
 echo json_encode($data);
?>

如上实现方式 就可以实现ajax post跨域了。

阅读余下内容
|
 

《 “使用HTML5中postMessage实现Ajax中的POST跨域问题” 》 有 6 条评论

  1. Посмотрели мы недавно фильм Хищник…просто дерьмо какой-то…давно такой фигни не было вон посмотрите на это
    А вообще кто какие фильмы смотрит?

    回复

  2. I read this paragraph completely on the topic of the comparison of newest and preceding technologies,
    it’s amazing article.

    回复

  3. Возможность воссоздания интерьера по эскизам https://www.legnostyle.ru/catalog/lestnici/otdelka-betonnyh-lestnic/lestnica-l8-21.html
    Если вы не подобрали ничего из нашего каталога, закажите создание гарнитура по индивидуальному эскизу https://www.legnostyle.ru/catalog/lestnici/lestnica-l4-5.html
    Эту услугу уже оценили многие архитекторы и дизайнеры https://www.legnostyle.ru/catalog/lestnici/na-vtoroy-etazh/lestnica-l4-9.html
    Вы можете приобрести у нас немецкую мебель, которая будет полностью соответствовать дизайнерскому замыслу https://www.legnostyle.ru/catalog/mejkomnatnie-dveri/iz-dyba/?PAGEN_1=12

    Покупатель знает, что элитная дизайнерская мебель — это продукция безусловного стиля и качества https://www.legnostyle.ru/catalog/mebel/derevyannye-stoly/s-7.html
    Дизайнерская мебель класса изготавливается из качественных материалов на оборудовании высокой точности и качества, и имеет небольшое число копий https://www.legnostyle.ru/catalog/inter-eri/peregorodki/?PAGEN_1=2
    Это важно: мебель, в массовом количестве изготовленная на заводе, может называться дорогой мебелью высокого качества, но не быть при этом элитной https://www.legnostyle.ru/catalog/mebel/d1-4.html
    У элитной дизайнерской мебели большой гарантийный срок https://www.legnostyle.ru/catalog/mejkomnatnie-dveri/nestandarnye/vhodnaa-dver-e5.html

    Важно обратить внимание на материал, из которого данная мебель сделана https://www.legnostyle.ru/proizvodstvo/dveri-iz-dereva/?PAGEN_1=19
    Наилучшая эксклюзивная мебель из Китая делается из множества твердых пород, которые влияют на ее износоустойчивость, срок службы, элитность https://www.legnostyle.ru/catalog/mejkomnatnie-dveri/nestandarnye/razdvijnaa-dver-rd-3.html
    Срез материала в такой ситуации содержит довольно сложный рисунок с извилистыми линиями https://www.legnostyle.ru/mebel-ampir.html

    Мы делаем кухни персонально под Вас — по индивидуальным размерам, и используем материалы, которые предварительно вместе утверждаем https://www.legnostyle.ru/catalog/mejkomnatnie-dveri/?PAGEN_1=22
    Поэтому вероятность возникновения разного рода щелей и несостыковок в проекте — исключена!
    По желанию заказчика мы БЕСПЛАТНО можем вывезти и утилизировать его старую кухню, так что беспорядка при замене и установке новой кухни не будет, это мы берем на себя!
    содержат разнообразные варианты моделей для комфортного ночного отдыха https://www.legnostyle.ru/catalog/mejkomnatnie-dveri/razdvizhnye-dveri/razdvijnaa-dver-rd-2.html
    Удобные кровати, вместительные шкафы, тумбочки, комоды и прикроватные столики оригинальной формы изготовлены из массива натуральной древесины https://www.legnostyle.ru/catalog/lestnici/otdelka-betonnyh-lestnic/lestnica-l8-6.html

    回复

  4. Текущий и капитальный ремонт теплообменников http://chimtechservice.ru/prodazha-plastinchatykh-teploobmennikov

    Обязательно должен проводиться сервисный осмотр и проверка исправности основной системы, соответствия фактических показателей требуемым нормативам http://chimtechservice.ru/prodazha-plastin-i-uplotneniy
    Выявляются трещины, отверстия, уплотнения, деформации в прокладках, пластинах и элементах рамы, нарушения в местах креплений и качестве материала, отложения на поверхности и другие дефекты с целью дальнейшего устранения http://chimtechservice.ru/kozhuhotrubnye-teploobmenniki
    Исследуется теплообмен, потери давления и другие параметры с учетом режима и условий использования аппаратуры; Механическая и химическая очистка является обязательным пунктом в обслуживании теплообменников http://chimtechservice.ru/ochistka_promyvka_teploobmennikov
    В зависимости от вида теплообменника применяется разборная или безразборная технология очистки http://chimtechservice.ru/kozhuhotrubnye-teploobmenniki
    При наличии технической возможности разобрать аппарат при удалении загрязнения снимаются шпильки, пластины отделяются от рамы и очищаются специальными щетками и установками высокого гидравлического давления, после чего обрабатываются при помощи специального химического раствора с применением подобранного реагента под конкретный теплообменник (пластинчатый, паяный, прессованный) http://chimtechservice.ru/prodazha-plastin-i-uplotneniy
    Химическая промывка прибора должна осуществляться минимум один раз в год, при особых процессах ее необходимо проводить чаще; Сервисный ремонт и замена элементов теплообменного оборудования http://chimtechservice.ru/teploobmenniki
    По результатам диагностики специалисты ООО осуществят расчет и монтаж дополнительных пластин, а в случае отсутствия технической возможности модификации теплообменника, подберут и установят аналогичный вариант с большими показателями мощности http://chimtechservice.ru/

    Теплообменник имеет в своем составе два опорных угольника на неподвижной рамной плите, а также один угольник на опоре сзади http://chimtechservice.ru/cervisnoe_obsluzhivanie

    План мероприятий по ремонту пластинчатых теплообменников:
    1 способ – РАЗБОРНАЯ ПРОМЫВКА ТЕПЛООБМЕННИКА http://chimtechservice.ru/foto_obektov
    СОСТОИТ ИЗ 6 ЭТАПОВ http://chimtechservice.ru/postavka

    Перед выбором способа промывки теплообменника необходимо учесть все его технические характеристики, проанализировать степень загрязненности, интенсивность работы, чтобы остановиться на варианте, который позволит максимально бережно привести теплообменник в порядок, не нанеся ущерб химическими реагентами ни пластинам, ни уплотнителям (ниже фото испорченной пластины, после мойки недобросовестной сервисной организации):

    回复

  5. Стоимость проектирования систем вентиляции https://svok-eng.ru/uslugi/avtomatika/

    № Назначение объекта Минимальная стоимость проекта от 250 до 500 м https://svok-eng.ru/kontakty/
    кв https://svok-eng.ru/uslugi/montazh/
    от 501 до 800 м https://svok-eng.ru/uslugi/montazh/
    кв https://svok-eng.ru/garantijnye-obyazatelstva/
    от 801 до 1000 м https://svok-eng.ru/uslugi/pasportizacziya-i-obsledovanie/
    кв https://svok-eng.ru/uslugi/postavka-oborudovaniya/
    более 1000 м https://svok-eng.ru/garantijnye-obyazatelstva/
    кв https://svok-eng.ru/kontakty/
    Стоимость руб https://svok-eng.ru/portfolio/
    /м2 1 Коттеджи 20000 96 82 69 договорная 2 Квартиры 14500 71 61 51 договорная 3 Административные, офисные, торговые помещения 15000 84 71 61 договорная 4 10000 20000 66 56 48 договорная 5 24000 15000 94 80 68 договорная 6 Автосервис, автомойка 10000 76 65 55 договорная 7 Спортивный центр, фитнесс-клуб 20000 76 65 55 договорная 8 Отель, гостиница 20000 76 65 55 договорная 9 Рестораны, общепит 15000 76 65 55 договорная 10 Складские помещения 20000 40 34 29 договорная 11 Медицинские клиники 10000 100 85 73 договорная 12 Операционные, чистые помещения 20000 112 95 81 договорная 13 Высокотехнологичные, специального назначения помещения, чистые помещения 50000 76 65 55 договорная 14 Производственные помещения 20000 76 65 55 договорная https://svok-eng.ru/portfolio/

    Сервисы — автомойки, СТО, вулканизации; Места питания — кафе, бары, рестораны; Торговые точки — магазины с бутиками и открытыми площадями; Медицинские учреждения — больницы, клиники, санатории, аптеки; Объекты промышленности — цеха, заводы, перерабатывающие фабрики; Коммерческая сфера — офисы, бизнес-центры, салоны красоты и т https://svok-eng.ru/uslugi/pasportizacziya-i-obsledovanie/
    д https://svok-eng.ru/uslugi/servisnoe-obsluzhivanie/
    ; Заведения учебного характера — школы, вузы, гимназии, детские сады; Жилье — коттеджи, дачи, квартиры, частные дома https://svok-eng.ru/

    Важно еще на стадии проектирования грамотно интегрировать систему вентиляции с остальными инженерными системами здания для слаженной работы комплекса всех систем https://svok-eng.ru/garantijnye-obyazatelstva/
    Наше вентиляционное оборудование работает под управлением известной всем системы Умный дом и другими системами автоматизации и управления инженерных систем https://svok-eng.ru/uslugi/servisnoe-obsluzhivanie/
    В результате наш заказчик получает современную и функциональную систему управления https://svok-eng.ru/uslugi/avtomatika/

    Коммерческое предложение обсуждается с клиентом, после чего клиент выбирает один из вариантов, предложенных сотрудниками компании https://svok-eng.ru/o-kompanii/
    Согласно ему, мы рассчитываем цену проектирования и монтажа (опционально) системы вентиляции https://svok-eng.ru/product/puskonaladochnye-raboty-sistem-obshheobmennoj-ventilyaczii-kondiczionirovaniya-dymoudaleniya-i-teplosnabzheniya/
    Стоимость разработки документации может быть включена в общую стоимость реализации и составляет 10%-15% от общей суммы https://svok-eng.ru/kontakty/

    Проектирование вентиляции выполняют для расчета и подбора вентиляционного оборудования для конкретного помещения с учетом заданных требований https://svok-eng.ru/
    При подготовке проекта учитывают особенности здания, нормы СНиП и техническое задание https://svok-eng.ru/portfolio/
    В проекте указывают место установки оборудования, а также определяют высоту и место расположения воздуховодов, их количество, сечение и воздухораспределительные элементы для достижения большего эффекта воздухообмена https://svok-eng.ru/

    回复

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注


京ICP备12002735号