网页幻灯片如何使用flickR和HTML标签
网页幻灯片如何使用flickR和HTML标签
提问于 2019-07-24 13:26:47
我必须以幻灯片的形式在URL中显示三条推特。
这是我的代码，没有幻灯片
ui <- fluidPage(
sidebarLayout(
sidebarPanel(
####
),
mainPanel(
htmlOutput("top_tweets_1"),
htmlOutput("top_tweets_2"),
htmlOutput("top_tweets_3")
)))
server <- function(input, output) {
tws <- c("https://twitter.com/Twitter/status/1144673160777912322","https://twitter.com/Twitter/status/1144673160777912322","https://twitter.com/Twitter/status/1144673160777912322")
output$top_tweets_1 <- renderUI({
tagList(
tags$head(
tags$script("!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');")
),
HTML(
paste('<blockquote class="twitter-tweet" data-lang="en"
style=" width:500;
height:500;">',
paste("<a href=\"",tws[1],"\">","tweet1","</a>"),
'</blockquote>')
))
})
output$top_tweets_2 <- renderUI({
tagList(
tags$head(
tags$script("!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');")
),
HTML(
paste('<blockquote class="twitter-tweet" data-lang="en"
style=" width:500;
height:500;">',
paste("<a href=\"",tws[2],"\">","tweet2","</a>"),
'</blockquote>')
))
})
output$top_tweets_3 <- renderUI({
tagList(
tags$head(
tags$script("!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');")
),
HTML(
paste('<blockquote class="twitter-tweet" data-lang="en"
style=" width:500;
height:500;">',
paste("<a href=\"",tws[3],"\">","tweet3","</a>"),
'</blockquote>')
))
})
}运行应用程序
shinyApp(ui = ui, server = server)
我看到这段代码使用的是符合我需要的slickR包，但我想显示的是网址内容，而不是图片。这是我用一个URL试过的，看它是否有效
library(slickR)
ui <- fluidPage(
sidebarLayout(
sidebarPanel(
####
),
mainPanel(
slickROutput("slickr", width="500px"),
)))
server <- function(input, output) {
tws <- c("https://twitter.com/Twitter/status/1144673160777912322","https://twitter.com/Twitter/status/1144673160777912322","https://twitter.com/Twitter/status/1144673160777912322")
output$slickr <- renderSlickR({
slickR(
tagList(
tags$head(
tags$script("!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');")
),
HTML(
paste('<blockquote class="twitter-tweet" data-lang="en"
style=" width:500;
height:500;">',
paste("<a href=\"",tws[1],"\">","tweet1","</a>"),
'</blockquote>')
)) )
)}
}
Run the application
`shinyApp(ui = ui, server = server)`所以我试着用它，但是我什么也没有，也没有这个错误。
错误:obj必须是字符向量
有什么帮助吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-07-24 13:37:12
下面是一种使用Twitframe在iframes中嵌入tweet的解决方案。还有一些JS代码可以自动设置iframes的高度，我在Twitframe上也找到了这些代码。该应用程序使用JS库slick.js。您必须下载zip文件这里并将其解压缩为应用程序的www子文件夹。我没能把幻灯片集中起来。
library(shiny)
tweets <- c(
"https://twitter.com/Twitter/status/1144673160777912322",
"https://twitter.com/Twitter/status/1144673160777912322",
"https://twitter.com/Twitter/status/1144673160777912322"
)
urls <- sapply(tweets, URLencode, reserved = TRUE)
srcs <- paste0("https://twitframe.com/show?url=", urls)
js <- '
$(window).on("message", function(e) {
var oe = e.originalEvent;
if (oe.origin != "https://twitframe.com")
return;
if (oe.data.height && oe.data.element.id.match(/^tweet_/)){
$("#" + oe.data.element.id).css("height", parseInt(oe.data.height) + "px");
if(oe.data.element.allLoaded === true){
setTimeout(function(){$("#tweets").slick({
arrows: true,
dots: true,
slidesToShow: 1,
})},0);
}
}
});'
ui <- fluidPage(
fluidRow(
tags$head(
tags$script(HTML(js)),
tags$link(rel="stylesheet", type="text/css",
href="slick-1.8.1/slick/slick-theme.css"),
tags$link(rel="stylesheet", type="text/css",
href="slick-1.8.1/slick/slick.css"),
tags$script(type="text/javascript",
src="slick-1.8.1/slick/slick.min.js"),
tags$style(HTML(
"
#slick .slick-prev {
position:absolute;
top:65px;
left:-50px;
}
#slick .slick-next {
position:absolute;
top:95px;
left:-50px;
}
.slick-prev:before, .slick-next:before {
color:red !important;
font-size: 30px;
}
.content {
margin: auto;
padding: 20px;
width: 60%;
}"))
),
uiOutput("slick")
)
)
server <- function(input, output, session) {
output[["slick"]] <- renderUI({
tagList(
tags$div(
class = "content",
tags$div(
id = "tweets",
lapply(seq_along(srcs), function(i){
tags$div(tags$iframe(
id = paste0("tweet_", i),
border=0, frameborder=0, height=50, width=550,
src = srcs[i]
))
})
)
),
singleton(tags$script(HTML(
sprintf("$(document).ready(function(){
var nloaded = 0;
var allLoaded;
$('iframe[id^=tweet_]').load(function() {
nloaded++;
if(nloaded === %d){
allLoaded = true;
}else{
allLoaded = false;
}
this.contentWindow.postMessage(
{ element: {id:this.id, allLoaded: allLoaded}, query: 'height' },
'https://twitframe.com');
});
});", length(tweets)))))
)
})
}
shinyApp(ui, server)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57184074
复制相关文章
相似问题
腾讯云开发者
