Передача данных в iframe для настройки содержимого

Question

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

Answer 1

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

Есть, я уверен, много способов сделать это. Если цвета меняются динамически, важно иметь возможность общаться. Если он не динамический, вы также можете определить их как параметры строки запроса в URL-адресе IFRAME и использовать эти цвета непосредственно на своем сервере для определения соответствующего сценария, включая цвета с самого начала (хотя это означает, что ваши данные изменяются в зависимости от цветов). .)

Из скрипта, использующего jQuery и определенного в IFRAME, вы можете получить доступ к тегу IFRAME с помощью window.frameElement . Итак, я бы написал что-то вроде этого:

var f = window.frameElement;
if(f)
{
    var c, bc, tc;

    c = jQuery(f).data("color");
    bc = jQuery(f).data("border-color");
    tc = jQuery(f).data("text-color");
}

Теперь переменные c, bc и tc имеют ваши цвета.

Обратите внимание, что я проверяю f, чтобы убедиться, что он существует. Если ваше текущее окно не определено внутри IFRAME, тогда f == null, и вы, вероятно, хотите каким-то образом обработать этот особый случай, будь то игнорирование его, как в моем примере выше.

Соответствующий HTML выглядит так:

<iframe id="my-iframe"
        data-color="#112233"
        data-border-color="#aabbcc"
        data-text-color="#666666"
        ...>
</iframe>

---

Если вы хотите получить доступ к IFRAME из родительского окна, вы можете использовать вместо него атрибут id:

var iframe = jQuery("id");
c = iframe.data("color");
[...]