复制图像 URL 并粘贴到单独页面的表单中答案

【问题标题】：Copy image URL and paste in form on separate page复制图像 URL 并粘贴到单独页面的表单中
【发布时间】：2018-10-23 23:23:26
【问题描述】：

我有两页。一个是带有文本输入的页面，您可以在其中键入个人资料图像的 url。此文本旁边有一个按钮，用于打开另一个页面。

您可以在第二页上传图片。我希望能够单击第二页上的图像，让它复制 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 正确通过，但我不知道如何将其发送回第一页并将其插入到文本输入中。

感谢任何帮助！谢谢！

【问题讨论】：

你看过sessionStorage吗？

标签： javascript php html input copy-paste

【解决方案1】：

你可以将url保存在localStorage中

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

然后在另一个页面上检查它是否存在

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

完成后，删除您的 localStorage 项

localStorage.removeItem("imgName");

但是如果您打开一个弹出窗口进行图像选择并且您的主页仍然打开，您可以使用window.postMessage

这是来自davidwalsh website的一个很好的例子

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);

【讨论】：

如果初始页面被刷新，该方法将检测localStorage only item。有没有办法让它自动检测它而不刷新？当图像选择页面打开时，它会在一个新窗口中打开。我想关闭窗口并让第一页自动检测 localStorage 项目。

【解决方案2】：

在弹出窗口中，我只是将脚本更改为： parentform = 父窗口上的表单名称 logo_url 是表单中输入的名称

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

【讨论】：