Question

我有这个获取用户folderID的javascript并返回指向该文件夹的链接。

    <script>
        function onSuccess(ID_FOLDER) {
        var div = document.getElementById('output');
        var FolderPathURL = "https://drive.google.com/drive/folders/"+ID_FOLDER+"";
        div.innerHTML = "<a href='"+FolderPathURL+"' target='_blank'>Link to Folder</a>"
        }
        google.script.run.withSuccessHandler(onSuccess).getFolderIds();
    </script>

html看起来像这样，并显示了一个href链接。这就像现在一样。

<div id="output">Folder URL</div>

但我需要链接为按钮（谷歌css蓝色动作按钮），所以当他们点击按钮时链接就会打开。

<button class="action">Show Folder</button>

Answer 1

将此类添加到相关的链接标记：

.button-blue {
  background: -moz-linear-gradient(top, #4d90fe, #4787ed);
  background: -ms-linear-gradient(top, #4d90fe, #4787ed);
  background: -o-linear-gradient(top, #4d90fe, #4787ed);
  background: -webkit-linear-gradient(top, #4d90fe, #4787ed);
  background: linear-gradient(top, #4d90fe, #4787ed);
  border: 1px solid #3079ed;
  color: #fff;
}

Answer 2

 <script>
    function onSuccess(ID_FOLDER) {
    var div = document.getElementById('output');
    var FolderPathURL = "https://drive.google.com/drive/folders/"+ID_FOLDER+"";
    div.innerHTML = "<a href='"+FolderPathURL+"' target='_blank'><button class="action button-blue">Show Folder</button> </a>"
    }
    google.script.run.withSuccessHandler(onSuccess).getFolderIds();
</script>

按@Ashwin建议添加css

.button-blue {
 background: -moz-linear-gradient(top, #4d90fe, #4787ed);
 background: -ms-linear-gradient(top, #4d90fe, #4787ed);
 background: -o-linear-gradient(top, #4d90fe, #4787ed);
 background: -webkit-linear-gradient(top, #4d90fe, #4787ed);
 background: linear-gradient(top, #4d90fe, #4787ed);
 border: 1px solid #3079ed;
 color: #fff;
 }

Answer 3

从HTML5开始，按钮支持格式属性。最重要的是不需要javascript或诡计。

更改：

div.innerHTML = "<a href='"+FolderPathURL+"' target='_blank'><button class="action button-blue">Show Folder</button> </a>"

要

div.innerHTML = "<form><button formaction='"+FolderPathURL+"'>Show Folder</button></form>"

将Javascript变量传递给HTML按钮作为href

3 个答案: