Форум Flasher.ru - IFrame окно НАД флешем

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)

- HTML/DHTML/CSS/JS/VB (http://www.flasher.ru/forum/forumdisplay.php?f=66)

- - IFrame окно НАД флешем (http://www.flasher.ru/forum/showthread.php?t=149650)

IFrame окно НАД флешем

Мне нужно открыть окно платежной системы. Окно открывается через iFrame. В флеше создаю вызов ExternalInterface

Код AS3:

if (ExternalInterface.available) {

                ExternalInterface.call("ShowWebSite", "https://myService.com/show_form?app_params=testable_app_params&format=iframe&sig=54222d8a1c2a9412b91bc0abe62e8040&ts=1296285802");

                                }

Вызываем JS функцию:

PHP код:


		
			
<script laguage='javascript'>

      function ShowWebSite(url)

       {

          //Разными способами пробую

          document.getElementByID('iFrameID').src=url;

        //parent.frames['iFrameID'].location.href=url;

        //window.frames.iFrameID.location.href=url;

      }

   </script>

// в body

 <iframe id="iFrameID" width="430" height="400" scrolling="no" style="border: 1px solid #ccc;"></iframe>

Нет окна:(

Добавлено через 3 минуты
params.wmode = "opaque"; - тоже не помогло

Знакомая задачка.

1) Попробуйте такую запись:
JS:

Код:

<script language="javascript">

function ShowWebSite() 

{ 

 var node =  document.getElementById('iFrameID');

 node.src = 'https://myService.com/show_form?app_params=testable_app_params&format=iframe&sig=54222d8a1c2a9412b91bc0abe62e8040&ts=1296285802'; 

} 

</script>

2) В AS не забудьте импортировать сам класс:

Код AS1/AS2:

import flash.external.*;

3) Локализуйте проблему. Нарисуйте в HTML обычную кнопку и повесьте на нее для проверки вызов
ShowWebSite() :

Код:

<input name="" type="button" onclick="ShowWebSite()"/>

Если заработает, настраивайте вызов уже из флеша - сперва просто функции с фиксированным url, если будет ок, потом уже и с передачей аргумента url.

4) Если все будет ок, теперь можно заняться настройкой расположения iframe НАД флешем. Для этого можно использовать абсолютное позиционирование блока-контейнера с флешем и блока-контейнера с iframe с использованием z-индексов.

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

mooncar, спасибо. Оказывается пример работал, просто этот iFrame появлялся в самом низу страницы, где его не видно, а я в запаре не обратил внимание на прокрутку. Теперь проблема в том, что он появляется сразу (видна рамка и прокрутка видна), а должен быть невидимым до вызова, ну и конечно появляться ровно посредине над флэш-приложением. Не подскажите по позиционированию?

У меня это реализовано так:

1) Невидимость.
Сам iframe обернут в div.
Первоначально этот div имеет стиль display: none, а при вызове функции показа данному блоку задается стиль display:run-in (можно также использовать display:block, сейчас не упомню уже, почему именно run-in использовал).

Делается это с помощью такой конструкции

Код:

var divnode = document.getElementById('divcont' + curContent);

divnode.className = 'vis_on';

,
При этом в сам iframe загружается целевая страница уже известным вам способом. То есть нечто аналогичное нужно добавить в вашей JS-функции.

Классы для показа/скрытия:

Код:

.vis_on {

        display:run-in;

}

.vis_off {

        display: none;

}

Соответственно изначально на упомянутый <div> назначен класс vis_off.

2) Позиционирование блока с iframe - position:absolute; z-index:2 , ну и размещен он где нужно над страницей.
Позиционирование блока с флешкой - position:absolute; z-index:0, также расположен, где нужно.

Как удобнее работать - первоначально отключить невидимость блока с iframe, и задать бордюр, чтобы удобнее было подгонячть на странице.

Посмотрите код на странице примера, который я привел, возможно что-то поможет.
Вот выдранный оттуда кусок с iframe:

Код:

<div id="divcont2" style="position:absolute; left: 390px; top: 80px; width: 484px; height: 236px; z-index:2;" class="vis_off">

        <iframe id="cont2" src="about:blank" name="cont2" frameborder="0" width="484" height="236" marginwidth="0" marginheight="0" scrolling="auto" allowtransparency="true" style="background-color:transparent;"></iframe>

</div>

Что касается скроллига внутри самого iframe, то устанвленный scrolling="auto" - тут чисто мой случай, сами страницы не должны вылезать по ширине за размеры iframe, а должна появляться только вертикальная прокрутка. У меня это достигается фиксацией ширины в вверстке самих страниц.

В общем покропеть тут придется, нюансики есть. Но схема, приведенная мною выше, работает успешно, и даже довольно кроссбраузерна.

Все отлично работает! Спасибо mooncar за такое детальное описание. Я пока до конца не доделал, но тут только может быть одна проблема - после оплаты или если юзер решит закрыть окно оплаты, то нужно как-то сделать display: none для div. Привязать колбек от API платежной системы попробую, но не уверен что мне удастся вызвать JS внутри моей HTML.

Рад был помочь, разбирайтесь дальше. Вообще взаимодействие разных технологий - штука порой сложная, но результат стоит того.

Да потом отпишу как получилось, т. к. считаю что монетизация приложений должна быть интересна многим. Особенно без зависимости от социалок.
Я там у себя ещё ошибку нашел, может из-за этого не работало: document.getElementByID - нужно Id так как JS зависит от регистра букв.

Тут ещё проблемка с этим окном нарисовалась. Везде нормально, а в IE под флэшкой выводится.
Не подскажите как решить?

Добавлено через 1 час 7 минут
Решил. Пришлось долго мудрить с z-index и pozition