【问题标题】:How can I launch a website from a button如何从按钮启动网站
【发布时间】:2014-06-17 16:26:13
【问题描述】:

我知道如何使用 createAnchor 在面板中放置链接,但是我想从按钮启动链接。这可能吗,如果可以,怎么办?

【问题讨论】:

    标签: google-apps-script


    【解决方案1】:

    经过一些尝试和错误,我找到了实现目标的更简单方法。 我只是创建一个按钮的图像,显​​示我想要的文本,并使用锚的这些 setAttribute 方法。 不幸的是,我仍然需要一个 AbsolutePanel。

    function doGet()
    { 
      // Problem with Google Apps :
      //    Not possible to click a Button and show a site
      //    Solutions found on StackOverflow mostly use :
      //       a) var panel  = createAbsolutePanel               --> Necessary to create an Absolute Panel
      //       b) var image  = createImage                       --> The image to be shown 
      //       c) var anchor = createAnchor                      --> Anchor making it possible to activate a url
      //       d) position the anchor on top of the image
      //       e) make anchor and image of same size
      //       f) make anchor invisible (by zIndex, opacity or visibility)
      //    
      //    One of the people showing how this works is http://stackoverflow.com/users/1368381/serge-insas who's
      //    efforts inspired me to have a look at other possibilities. (thanks !)
      //    
      //    Result     : next step in making it easy to overcome a limitation of GAS --> no createImage required anymore
      //    How        : using setAttribute('backgroundImage', Url)  method of anchor
      //    Limitation : still required to create an Absolute panel instead of a Vertical panel --> who's next to improve ??
      //
      //    Author     : SoftwareTester, may 13th, 2014
    
       var app = UiApp.createApplication().setTitle("Image Anchor");
       var picButton = 'https://drive.google.com/uc?id=0BxjtiwHnjnkrTVJiR1g2SlZTLVE'; // Can on be accessed be a few people
       var widthButton = 128;
       var heightButton = 24;
       var anchor = app.createAnchor("", "http://www.opasittardgeleen.nl")
                      .setHeight(heightButton).setWidth(widthButton)            
    //                  .setHeight("150").setWidth("128")                         // Nice effect !!
    //                  .setHeight("150").setWidth("512")                         // Even more 
                      .setStyleAttribute('backgroundImage', 'url(' + picButton + ')');
    
       var panel = app.createAbsolutePanel().setWidth('50%').setHeight('50%');
       panel.add(anchor,100,50);         // I would like to avoid positioning like this and just add the anchor to a Grid or VerticalPanel
       app.add(panel);  
       return app.close();
    }
    

    【讨论】:

    • 嗨,谢谢你提到我;)我想我发现了一些有趣的东西,可以在没有绝对面板约束的情况下轻松操作......
    【解决方案2】:

    我已经回答了一个类似的帖子,其中有一个很好的解决方法,尽管我承认它的作用有点复杂......

    这里是a test app

    从另一篇文章中复制的代码如下:我使用了一个不可见的锚点叠加到图像上,但它当然可以是其他任何东西......一个按钮或任何你想要的东西。

    function doGet(){
      var app = UiApp.createApplication().setStyleAttribute("background", "#CCCCFF").setTitle('Anchor Test')
      var top = '100PX';// define dimensions and position
      var left = '100PX';
      var width = '80PX';
      var height = '80PX';
      var mainPanel = app.createVerticalPanel();
    
      var customAnchor = app.createHorizontalPanel().setId('usethisId')
      addStyle(customAnchor,top,left,width,height,'1','1')
    
      var image = app.createImage("https://dl.dropbox.com/u/211279/Time-change-clock_animated_TR80.gif")
      addStyle(image,top,left,width,height,'1','1')
    
      var realAnchor = app.createAnchor('This is the Anchor', 'https://sites.google.com/site/appsscriptexperiments/home')  
      addStyle(realAnchor,top,left,width,height,'2','0')
    
    
      customAnchor.add(realAnchor);
      customAnchor.add(image)
      mainPanel.add(customAnchor);
      app.add(mainPanel);
      return app;
    }
    
    function addStyle(widget,top,left,width,height,z,visibility){
    widget.setStyleAttributes( 
        {'position': 'fixed', 
         'top' : top,
         'left' : left,
         'width' : width, 
         'height':height,
         'opacity' : visibility,  
         'zIndex' : z});
       }  
    

    编辑:我忘了用按钮示例提及这篇文章...正是您想要的:How do I open a web browser using google apps script?


    编辑 2

    按照Software tester 的回答,这是一个紧凑的版本,可以放置在网格或其他任何地方...只需放置名为“容器”的小部件。

    为了说明,我在下面的示例中将其放置在网格中/

    link to test

    代码:

    function doGet(){ 
      var app = UiApp.createApplication().setTitle("Image Anchor");
      var picButton = 'https://dl.dropboxusercontent.com/u/211279/ProgressSpinner.gif'; 
      var img = app.createImage(picButton).setPixelSize(25,25);
      var grid = app.createGrid(5,2);
      for(n=0;n<5;n++){
        grid.setText(n,0,'some text').setBorderWidth(1);
      }
      var anchor = app.createAnchor(" -  ", "https://sites.google.com/site/appsscriptexperiments/").setStyleAttribute('opacity','0').setPixelSize(25,25);
      var container = app.createAbsolutePanel().setPixelSize(25,25);
      container.add(img,0,0).add(anchor,0,0);
      grid.setWidget(4,1,container);
      app.add(grid);  
      return app;
    }
    

    【讨论】:

      【解决方案3】:

      Serge Insas 的回答 EDIT 2 使用网格提供了额外的灵活性。

      通过学习和利用彼此的好想法来一点一点地改善世界,当然也适用于软件。再次感谢 Serge!

      我注意到在某些情况下可能会或可能不会感兴趣的一些差异。

      我总是尝试指定常量(如width 和height)并使用.setPixelSize(width, height) 等类似代码最小化,从而更容易“在更改时不要忘记某些东西”。这就是为什么我更愿意避免创建单独的图像对象。

      Serge Insas 使用 .setStyleAttribute('opacity','0'); 而我使用 .setStyleAttribute('backgroundImage', url); 。我不知道这两种可能性的优缺点是什么。

      下面是通用代码

      function doGet()
      { // Generalized version using : image + opacity + container
        var app       = UiApp.createApplication().setTitle("Image Anchor");
        var width     = 25;
        var height    = 25;
        var urlImage  = 'https://dl.dropboxusercontent.com/u/211279/ProgressSpinner.gif';
        var urlAnchor = "https://sites.google.com/site/appsscriptexperiments/";
      
        var grid      = createImageAnchor(urlImage, urlAnchor, width, height);
      
        app.add(grid);
        return app;
      } 
      

      而函数createImageAnchor可以是

      function createImageAnchor(urlImage, urlAnchor, width, height)
      { // Using backgroundImage
         var app    = UiApp.getActiveApplication();
      
         var anchor = app.createAnchor("", urlAnchor).setPixelSize(width, height)
                         .setStyleAttribute('backgroundImage', 'url(' + urlImage + ')');
      
         var panel  = app.createAbsolutePanel().setPixelSize(width, height).add(anchor, 0, 0);
         var grid   = app.createGrid(1, 1).setWidget(0, 0, panel); // Create grid and put anchor in it
      
         return grid;   
      }  
      

      或

      function createImageAnchor(urlImage, urlAnchor, width, height)
      { // Using opacity
         var         = UiApp.getActiveApplication();
      
         var image   = app.createImage(urlImage).setPixelSize(width, height);
         var anchor  = app.createAnchor("", urlAnchor) .setPixelSize(width, height)
                          .setStyleAttribute('opacity','0');
      
         var panel   = app.createAbsolutePanel().setPixelSize(width, height)
                          .add(image, 0, 0).add(anchor, 0, 0);      // Same position for image and anchor
         var grid    = app.createGrid(1, 1).setWidget(0, 0, panel); // Create grid and put image + anchor in it
      
         return grid;   
      }  
      

      使用createImageAnchor 可以更轻松地在代码中的任何位置使用此“组合对象”,尤其是在将其添加到库之后。

      由于我是 GAS 新手(在 5 年不活动后于 5 月 7 日开始),我知道我需要学习很多东西,并且想知道不同方法的优缺点是什么。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2019-11-17
        • 2016-03-30
        • 2019-05-30
        • 2011-09-29
        • 2011-12-22
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多