文章/答案/技术大牛

发布

社区首页 >问答首页 >uiOutput忽略<head>或<script>标记

问uiOutput忽略<head>或<script>标记
EN

Stack Overflow用户

提问于 2021-01-04 19:46:15

回答 1查看 161关注 0票数 1

我试图在我闪亮的应用程序中包含一个户外活动(.com)地图，它使用的是一个html页面，头中有一个脚本标记，正文中有一个JavaScript标记。

当使用Outdooractive的html模板时，将其保存为html文件，然后通过includeHTML("originalFile.html")将其包含到一个闪亮的应用程序中，地图将被正确显示。但是，由于我希望地图的坐标是交互式的(而不把它保存在中间文件中)，所以我尝试使用闪亮的标记在renderUI中创建html，并通过uiOutput显示它。这样做时，JavaScript部件似乎根本不被处理。地图上方的标头会显示出来，下面的文本也会显示出来，但是地图会被忽略，没有错误信息。有趣的是，当我用tags$head替换标记tags$header时，也会发生同样的情况。

这是我的app.R

library(shiny)

# Define UI for application that draws a histogram
ui <- fluidPage(

    # Application title
    titlePanel("Outdooractive Map"),

    # Sidebar with a text input for coordinates
    sidebarLayout(
        sidebarPanel(
            textInput ("lng",
                        "Longitude:",
                       value = "10.000",
                    ),
            textInput("lat",
                      "Latitude:",
                      value = "45.555")
        ),

        # Show the map 
        mainPanel(
            #includeHTML("originalFile.html") # This works
            textOutput("text"), # This shows the correct longitude/latitude
            uiOutput("map") # This seems to ignore the script
        )
    )
)

# Define server logic required to access API
server <- function(input, output) {
    
    output$map <- renderUI({
        lng = input$lng
        lat = input$lat
        
        tags$html(
            tags$div(
                tags$head(tags$title("Test"),
                          HTML('<meta charset="utf-8">'),
                          tags$script(
                              src = '//www.outdooractive.com/alpportal/oa_head.js?proj=api-dev-oa&amp;key=yourtest-outdoora-ctiveapi&amp;lang=en'
                          ),
                          tags$style(HTML(
                              '.oax .oax-cluster-marker-cont, .oax-cluster-marker-cont {background-color: red;}'
                          ))),
                tags$body(
                    h2("Outdooractive Routes"),
                    div(class = 'oax-top-cont'),
                    tags$script(HTML(paste(
                        'var conf = {frontendtype: "tour", zoom: 11, center:[ ', lng, ", ",  lat, ']}; var fvp = oa.api.flexviewpage( conf );')
                    )),
                    HTML('There should be a map on top of me.')
                )
            ),

        )
    })
    
    output$text <- renderText ({
        paste(input$lng, input$lat)
    })
}

# Run the application 
shinyApp(ui = ui, server = server)

要完全复制这个示例，这将是originalFile.html (当app.R中的第23行未注释时，它可以工作)：

<!DOCTYPE html>
<html>
  <head>
    <title>outdooractive platform - API Template</title>
    <meta charset="utf-8">

    
    <!-- load Outdooractive Javascript API -->
    <script type="text/javascript" 
            src="//www.outdooractive.com/alpportal/oa_head.js?proj=api-dev-oa&amp;key=yourtest-outdoora-ctiveapi&amp;lang=en"></script>


    <style>
      .oax .oax-cluster-marker-cont, .oax-cluster-marker-cont {
          background-color: red;
      }
    </style>

  </head>
  <body>
  <br>
  <br>
    <h2>Outdooractive Routes</h2>

    <!-- container used by FlexView API -->
    <div class="oax-top-cont"></div>


    <!-- and some lines of javascript inside a script tag -->
    <script type="text/javascript">

      var conf = {
          frontendtype:   "tour",          // choose content type
          zoom:           11,              // set initial zoom level
          center:       [ 10.292, 47.546 ] // set initial map center
      };
      
      var fvp = oa.api.flexviewpage( conf );

    </script>
  </body>
</html>

任何指示都将不胜感激。

javascript

html

api

shiny

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-01-11 10:37:25

我宁愿在观察者中调用一些JavaScript：

library(shiny)
library(shinyjs)
library(glue)

# Define UI for application that draws a histogram
ui <- fluidPage(
   useShinyjs(),
   includeHTML("header.html"), ## see comment
   titlePanel("Outdooractive Map"),
   sidebarLayout(
      sidebarPanel(
         textInput ("lng",
                    "Longitude:",
                    value = "10.000",
         ),
         textInput("lat",
                   "Latitude:",
                   value = "45.555")
      ),
      mainPanel(
         div(
            class = "oax-top-cont"
         )
      )
   )
)

server <- function(input, output) {  
   observe({
      script <- glue("var conf = {{",
                     "frontendtype: 'tour',",
                     "zoom: 11,",
                     "center: [{input$lng}, {input$lat}]",
                     "}};",
                     "var fvp = oa.api.flexviewpage(conf);"
      )
      runjs(script)
   })
}

# Run the application 
shinyApp(ui = ui, server = server)

几点意见：

shinyjs的使用使在R中使用JavaScript变得轻而易举。您需要在您的runjs.
I中的某个地方调用useShinyjs，然后可以通过includeHTML

发出任意的JS代码，每当lat和/或lng更改并移动静态部分(即将API和css加载到UI.

Important Note中)时，观察者就会调用相应的JS函数。

tags$head(
   tags$script(
      type = "text/javascript",
      src  = "//www.outdooractive.com/alpportal/oa_head.js?proj=api-dev-oa&amp;key=yourtest-outdoora-ctiveapi&amp;lang=en"
   ),
   tags$style(...)
)

然而，

没有从户外活动加载JS，我得到了响应代码403 (禁止)，即户外拒绝了我的请求。我猜这是由于使用测试帐户。不管出于什么有趣的原因，硬编码html文件中的位并使用includeHTML似乎都是有效的(同样，我可以简单地猜测，但我假设outdooractive尝试以某种方式确定您是在本地使用测试帐户，还是已经在生产中使用测试帐户。也许tags$script部分失败了这个测试，而静态方法通过了这个测试，但这仅仅是我的猜测-更重要的是，includeHTML解决方案奏效了。但是，您应该尝试用自己的键替换密钥，看看是否还需要includeHTML部件，或者可以直接使用tags$script in your U‘)：

<script type="text/javascript" 
        src="//www.outdooractive.com/alpportal/oa_head.js?proj=api-dev-oa&amp;key=yourtest-outdoora-ctiveapi&amp;lang=en">
</script>
<style>
   .oax .oax-cluster-marker-cont, .oax-cluster-marker-cont {
       background-color: red;
   }
</style>

更新

我在Chrome中添加了这个应用程序的外观：

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65568872

复制

相似问题

问uiOutput忽略<head>或<script>标记
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问uiOutput忽略<head>或<script>标记EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问uiOutput忽略<head>或<script>标记
EN