使用google-apps-script创建带超链接的图像

Question

我一直试图将带有超链接的图像放入谷歌应用程序脚本ui中。 我首先想到使用createAnchor（），但这只允许使用文本。 然后我想到了使用一个按钮，但据我所知，你不能打开一个新的选项卡/窗口并重定向回调函数。

我也尝试过createHTML（），但该元素尚未被它处理。

我看到人们在图像上叠加透明按钮，但在回调中仍有相同的问题。

我的研究还没有找到答案。 有没有人有任何解决方案/例子？

谢谢

Answer 1

这适用于Chrome20和IE9

      // Container for box and results
      var imageContainer = app.createFlexTable();


      // Setup the button
      var button = app.createButton("ImageButton");
      button.setStyleAttribute("background", "url(dontshowimagehere.JPG) no-repeat");
      button.setStyleAttribute("position", "absolute");
      button.setStyleAttribute("color", "transparent");
      button.setStyleAttribute('zIndex','1');
      button.setStyleAttribute("border", "0px solid black");



      imageContainer.setWidget(0, 0, button);

      // image to click
      var image = app.createImage("image.jpg").setId(imageId);

      imageContainer.setWidget(1,0, image);                    

图像具有轻微（3px）偏移。 如果重要的话，这看起来要修复它http://www.w3schools.com/css/css_positioning.asp （对于图像和按钮使用flex表和顶部等的相对）

Answer 2

您是否尝试过覆盖图像的透明锚点？

function doGet() {
var app = UiApp.createApplication().setTitle("Image Anchor");
var panel = app.createAbsolutePanel().setWidth('50%').setHeight('50%');
var image = app.createImage().setUrl("https://lh6.googleusercontent.com/-v0Q3gPQz03Q/T_y5gcVw7LI/AAAAAAAAAF8/ol9uup7Xm2g/s512/GooglePlus-512-Red.png").setStyleAttribute("width", "28px").setStyleAttribute("height", "28px");
var anchor = app.createAnchor("?", "https://plus.google.com/u/1/116085534841818923812/posts").setHeight("28px").setWidth("28px").setStyleAttribute("opacity", "0.1").setTarget("blank");
panel.add(image,100,50);
panel.add(anchor,100,50);
app.add(panel);  
return app.close();
}

Answer 3

app.createAbsolutePanel（）。add（app.createImage（' https://www.google.com/images/logos/google_logo_41.png '））。add（app.createAnchor（''，' https：// www。 google.co.uk/intl/en/about/'）。setStyleAttributes（{position：'absolute'，top：'0px'，left：'0px'，width：'201px'，height：'47px'，opacity ： '0'}））

这是经过测试的。 它工作正常。 它不适用于定位图像（作为“绝对”）。 它不适用于.setHorizo​​ntalAlignment（UiApp.Horizo​​ntalAlignment.CENTER）

Answer 4

我不相信这可用于小部件。 我建议改变你的UI设计，以改为使用Anchor小部件。

Answer 5

如果您直接在页面上编码，请使用HTML Box。 点击“修改”编辑您的页面，然后转到菜单中的“插入> HTML框”。 它也会接受javascript！ 有几点需要注意 - 当使用javascript时，HTML Box不会接受链接......太糟糕了，但是有太多的漏洞。

如果您使用应用程序脚本进行编码，则可以尝试将图像放在面板上并使用绝对面板并将链接放在图像上。 另一种方法可以是使用.setStyleAttribute进行CSS样式化，并利用zIndex参数将面板放在图像顶部....就像这样：

var panel = app.createSimplePanel();
// add your image to the simple panel or whatever panel you wish to choose in your GUI

var popPanel = app.createSimplePanel()
  .setStyleAttribute('top','Y')
  .setStyleAttribute('left','X')
  .setStyleAttribute('zIndex','1')
  .setStyleAttribute('position','fixed');
// add your anchor to the popPanel

app.add(panel).add(popPanel);

不是100％肯定你是否可以使这个面板透明，但你可以尝试类似：.setStyleAttribute（'background'，transparent'）或通过以下方式更改不透明度：.setStyleAttribute（'opacity'，'。5'）

希望这会给你一些想法！

Answer 6

我设法用一个Anchor对象并使用CSS3。 它适用于Chrome，我没有在其他浏览器中测试它。

gui.createAnchor("", false, "$DESTINATION_URL$")
   .setStyleAttributes({ "display":"block",
                         "width":"$IMAGE_WIDTH_IN_PIXEL$",
                         "height":"$IMAGE_HEIGHT_IN_PIXEL$",
                         "background":"url($URL_OF_THE_IMAGE$)",
                         "background-size":"100% 100%",
                         "background-repeat":"no-repeat" })

当然你必须用你的数据替换$ ...... $。

蒂埃里

Answer 7

如果您首先在字符串中创建所有HTML，则可以使用您想要的HTML替换页面内容：

var myString = 'the html you want to add, for example you image link and button';
var page = SitesApp.getSite('example.com', 'mysite').getChildByName('targetpage');
var upage = page.setHtmlContent('<div>' + myString + '</div>');