Скопируйте URL изображения и вставьте форму на отдельной странице

Question

У меня две страницы.Одна из них - это страница с вводом текста, где вы можете ввести URL-адрес для изображения профиля.Рядом с этим текстом есть кнопка, где открывается другая страница.

На этой второй странице вы можете загружать изображения.Я хочу иметь возможность щелкнуть изображение на этой второй странице, скопировать его, закрыть окно и вставить URL-адрес в форму ввода с первой страницы.

Вот код с первойстраница:

<div class="form-group">
    <label for="Logo Url">Logo URL</label>
    <input type="text" class="form-control" value= "{{ $affiliate->logo_url }}" name="logo_url" required>
    <button class="button" onClick="window.open('{{route('affiliate.logo')}}'); return false;">
    <span class="icon">Open</span>
    </button>
</div>

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

foreach($imagelist as $image)
            {
                $url = Storage::disk('s3')->url('').$image['name'];
                echo '<div class="col-xs-3 col-sm-4 col-md-3 col-lg-3">
                <a href="javascript:selectImage(\''.$url.'\')" class="thumbnail">
                <img src='."$url".' class="img-fluid img-thumbnail">
                </a></div><br><br>';
            }

Здесь я могу взять URL-адрес изображения и поместить его в переменную 'url':

<script type="text/javascript">
    function selectImage(imgName){
    var url = imgName;
    console.log(url);
    }
</script>

Console.log (url) показывает, что URL-адрес проходит правильно, но я понятия не имею, как отправить его обратно на первую страницу и вставить в текстовый ввод.

Любая помощь приветствуется!Спасибо!

Answer 1

Во всплывающем окне я просто изменил скрипт на следующий: parentform = имя формы в родительском окне logo_url - это имя входа в форме

<script type="text/javascript">
    function selectImage(imgName){
    opener.document.parentform.logo_url.value=imgName;
    window.close();
    }
</script>

Answer 2

Вы можете сохранить URL-адрес в localStorage

localStorage.setItem("imgName", "url");

, а затем на другой странице проверить, существует ли он

if (localStorage.getItem("imgName")) {  
  console.log(localStorage.getItem("imgName"));
}

, как только это будет сделано, удалить элемент localStorage

localStorage.removeItem("imgName");

Но если вы открываете всплывающее окно для выбора изображения и ваша главная страница все еще открыта, вы можете использовать window.postMessage

, вот хороший пример с веб-сайта Дэвидвальша

var domain = 'http://scriptandstyle.com';
var myPopup = window.open(domain + 
'/windowPostMessageListener.html','myWindow');

//periodical message sender
setInterval(function(){
    var message = 'Hello!  The time is: ' + (new Date().getTime());
    console.log('blog.local:  sending message:  ' + message);
    myPopup.postMessage(message,domain); //send the message and target URI
},6000);

//listen to holla back
window.addEventListener('message',function(event) {
    if(event.origin !== 'http://scriptandstyle.com') return;
    console.log('received response:  ',event.data);
},false);