Как преобразовать этот код «ПРОМТ» для ввода данных из «IFRAME/POPUP»?

Ec_stassy

Как преобразовать этот код «ПРОМТ» для ввода данных из «IFRAME/POPUP»?

Это js-код:

 
u= prompt(" Enter a http:// image path ");
if( u.substring(0,3)=="htt" ){
text= "[image]" + u.trim() + "[/image]";
}
//update main webpage here using "text"

Код (разметка):

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

Это будет намного проще, чем вводить URL...

Я сделаю веб-страницу, нет проблем.

Проблема в том, как остановить код JavaScript до тех пор, пока iframe или всплывающее окно не вернет выбранное изображение?

Пока кнопка «ОК» не будет нажата в iframe или всплывающем окне, блок «if» в приведенном выше коде не будет выполнен.

В приведенном выше коде выполнение javascript автоматически останавливается до тех пор, пока в поле «подсказка» не будет нажата кнопка «ОК».

TeedgeMunda

Шаг 1: выдерните ВСЮ эту JavaScript-ерунду с помощью устаревшего iframe и подсказывайте ерунду. Шаг 2: заставить страницу работать без скриптов ПЕРВЫЙ с помощью ФОРМЫ.

Шаг 3. Превратите эту форму в модальную (для чего вам, возможно, даже не понадобится сценарий), а затем используйте AJAX или другой сценарий для добавления/улучшения/изменения уже рабочей страницы БЕЗ какого-либо мусора IFRAME.

Помните, что хорошие методы написания сценариев должны улучшать уже работающую страницу, а не быть единственным средством добавления функциональности.

_Amorph_

Я попробую это и дам вам знать. Однако я не собираюсь стилизовать окно подсказки. Идея состоит в том, чтобы загрузить веб-страницу вместо приглашения, и эта веб-страница может содержать изображения, которые пользователь ранее загрузил (или из галереи изображений), которые пользователь теперь может выбрать. После нажатия кнопки «Принять» URL-адрес изображения отправляется обратно в главное родительское окно, которое выполняет дальнейшую обработку URL-адреса, например показывает изображение в определенном теге IMG/DIV. Список URL-адресов, которые будет отображаться на этой странице iframe, будет сгенерирован с использованием PHP либо путем сканирования некоторого каталога, либо извлечения из MySQL и т. д.

G_s

Чтобы ускориться, запустите его из консоли.

Вы можете изменить его как хотите, в первый аргумент я поместил изображение, но это может быть любой элемент, содержащий другие элементы, в кнопку 0 я добавил возможность выполнить функцию, в которой она собирает значение поля, которое текстовый тип input.value, но вы можете делать то, что хотите и как хотите.

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

 window["prompt"]=(...a)=>{
let object=a[0];

let prom=document.createElement("DIV");
prom.style="position:absolute;border:1px solid red;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);margin:0px;width:300px;height:200px";
prom.appendChild(object);
let mask=document.createElement("DIV");mask.style="position:absolute;top:0px;left:0px;bottom:0px;right:0px;background-color:white;opacity:.9;";document.body.appendChild(mask);

let button0=document.createElement("DIV");
button0.style="position:absolute;border:1px solid red;bottom:5px;left:5px;text-align:center;line-height:20px;padding:10px;cursor:pointer;";
button0.textContent="Принимать";
prom.appendChild(button0);
let button1=document.createElement("DIV");
button1.style="position:absolute;border:1px solid red;bottom:5px;right:5px;text-align:center;line-height:20px;padding:10px;cursor:pointer;";
button1.textContent="Отмена";
prom.appendChild(button1);
let box=document.createElement("INPUT");box.type="text";
box.style="position:absolute;border:1px solid red;bottom:50px;width:90%;left:5%;right:5%;height:20px;padding:10px;";
prom.appendChild(box);
button1.onclick=(e)=>{prom.remove();mask.remove();};
button0.onclick=(e)=>{prom.remove();mask.remove();window[a[1]](box.value);};
prom.appendChild(button0);
document.body.appendChild(prom);
};

window["functionaction"]=(x)=>{alert(x);};
var elementobjecte=document.createElement("IMG");
elementobjecte.src="[URL='https://lumtu.com/yti/MYTTYMzlodHRwczovL3guZHBzdGF0aWMuY29tL2QvYXZhdGFycy9tLzUvNTk5Ny5qcGc_MTE3MDczNcDM']https://x.dpstatic.com/d/avatars/m/5/5997.jpg?1170735639[/URL]";
prompt(elementobjecte,"functionaction");

Код (JavaScript):

Alexsom

Привет @deathshadow Я пытаюсь добавить возможность wyswyg в текстовую область внутри формы.

Над формой я добавил пару кнопок, например, жирный курсив IMG и т. д.

С другими все в порядке, люди просто выбирают текст, который хотят, чтобы он был выделен ЖИРНЫМ шрифтом/курсивом и т. д., а затем нажимали кнопку, и все готово.

Проблема в этой кнопке IMG.

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

Они дают URL-адрес, и он вставляется в текущую позицию в текстовом поле.

Эту подсказку я хотел изменить.

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

Они нажимают на нужное имя изображения, и URL-адрес изображения отправляется на тот же javascript, который принимал входные данные из «подсказки».

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

Пример здесь:

https://vmapp.org/imageMake/

В правом верхнем углу есть ссылка «Просмотреть галерею изображений».

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

Наконец, они нажимают кнопку, и URL-адрес этого изображения отправляется обратно на главную страницу в текстовое поле ввода.

Это другой код, для ожидания ввода не требуется JavaScript.

Теперь мне нужна была аналогичная функциональность в текстовой области wyswyg.

Когда пользователь нажимает кнопку IMG, его местоположение в текстовой области и т. д. определяется с помощью JS,

Затем JS запрашивает URL и ждет здесь.

Затем JS добавляет

, где JS обнаружил местоположение курсора в текстовой области.

Selhoro

Хорошо, это оправдано как улучшение только для сценариев, так что это немного меняет мой ответ.

но лишь незначительно.

Я по-прежнему говорю: не используйте приглашение и не используйте iframe.

Попросите скрипты создать модальное окно (возможно, при загрузке?), чтобы вы могли его хешировать, перехватить onhashchange, чтобы проверить, соответствует ли это штриховке модальному модальному изображению, и заполнить его при нажатии.

либо из существующего массива PHP, уже отправленного с документом.

или использовать AJAX, чтобы получить его как что-то вроде JSON.

Поместите IMG в BUTTON, чтобы по нему можно было перемещаться с помощью клавиатуры, убедившись, что для них установлено значение type="button", чтобы вам не приходилось использовать Event.preventDefault(), и перехватите их щелчок, чтобы поместить его в вашу форму.

Базовые повседневные элементы пользовательского интерфейса.

Похожие темы	Дата
Дмитрий Валак - JavaScript для верстальщика 2016	19.12.2024, 05:12
Javascript. Уровень 3. Knockout.js	19.12.2024, 05:12
Консоль разработчика Chrome. Сравните цены на двух сайтах.	19.12.2024, 05:12
Помогите отладить обнаружение столкновений в шутере.	19.12.2024, 05:12
Проблема с оператором while	19.12.2024, 05:12
JS-Accordion, не может (display="block") все остальные элементы панели.	19.12.2024, 05:12
как сохранить файл JSON в своей папке.	19.12.2024, 05:12
Справка по Javascript	19.12.2024, 05:12
Веб-разработка с применением Node и Express. Полноценное использование стека JavaScript - Браун	19.12.2024, 05:12
Практическая разработка веб-приложений на JavaScript и AngularJS [LUXOFT]	19.12.2024, 05:12

Как преобразовать этот код «ПРОМТ» для ввода данных из «IFRAME/POPUP»?

Ec_stassy

TeedgeMunda

_Amorph_

G_s

Alexsom

Selhoro

I AM

Интересно