Как преобразовать этот код «ПРОМТ» для ввода данных из «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 автоматически останавливается до тех пор, пока в поле «подсказка» не будет нажата кнопка «ОК».

Саня Бондарев

Шаг 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(), и перехватите их щелчок, чтобы поместить его в вашу форму.

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

Похожие темы	Дата
Ng-book 1.4: The Complete Book On Angularjs	19.10.2024, 18:10
[laracasts] Learning Vue 1.0 - Step By Step	19.10.2024, 18:10
Сборник курсов AngularJS	19.10.2024, 18:10
Создаем Svg Анимацию, Используя Css И Javascript	19.10.2024, 18:10
[loftschool] Курс По Angularjs	19.10.2024, 18:10
Как рассчитать соотношение расстояний с помощью momentjs и turfjs	19.10.2024, 18:10
Datepicker отключил даты из текстового файла	19.10.2024, 18:10
Случайная загрузка iframe в качестве полноэкранного фона	19.10.2024, 18:10
HTML-форма	19.10.2024, 18:10
LoftSchool - Комплексное обучение JavaScript 2018	19.10.2024, 18:10

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

ec_stassy

Саня Бондарев

_Amorph_

g_s

alexsom

selhoro

I AM

Интересно