javascript - iframe 中的图像上的超链接(javascript、传单)
问题描述
我显示一个带有弹出窗口的标记。弹出窗口显示图像。
如果用户单击图像,我想打开一个网站。
我这样做了:
Popup = "<div><a href='http:...'><iframe src='" + m.image + "' scrolling='no' frameBorder='0' style='border:none;' ></iframe></a></div>";
marker.bindPopup(Popup).openPopup();
当我在图像上移动鼠标时,我有一个缩放图标(我应该是一个手形图标)。
如果我单击图像,则会放大此图像。
你看到我的错误了吗?
注意#1:我设计了一个自定义类名(从另一个问题复制):
<style>
.custom-popup .leaflet-popup-content-wrapper {
background:#2c3e50;
color:#fff;
font-size:16px;
line-height:24px;
}
.custom-popup .leaflet-popup-content-wrapper a {
color:rgba(255,255,255,0.5);
}
.custom-popup .leaflet-popup-tip-container {
width:30px;
height:15px;
}
.custom-popup .leaflet-popup-tip {
border-left:15px solid transparent;
border-right:15px solid transparent;
border-top:15px solid #2c3e50;
}
</style>
我定义了选项:
var options =
{
'maxWidth': '400',
'width' : '300',
'className': 'custom-popup'
}
最后创建弹出窗口:
Popup+= "<div><a href='https://google.com'><img src='" + (BASE_URL || '') + m.image + "' /></a></div>";
result.bindPopup(potentialPopup,options).openPopup();
颜色会改变,但弹出窗口的大小不会改变并且图像非常小???
传单弹出内容包装器 91x62
传单弹出内容 img 51x34
注意#2:我添加了样式:
img {
height:350px;
width:700px;
}
并更改了选项:
var options =
{
//'maxWidth': '400',
//'width' : '300',
'className': 'custom-popup'
}
和...弹出/图像高度改变了!但不是宽度?
注意#3:这是解决方案
.custom-popup div.leaflet-popup-content {
min-Width: 300px;
max-Width: 300px;
}
不要问为什么!!!
感谢@mplungjan 的帮助!
解决方案
不要将 iFrame 包装在锚点中,因为它不是有效的 HTML,并且不会链接 iFrame 的内容。
div 和 achor 将根据内容调整它们的大小:
const m = { image: "https://i.imgur.com/k5QOP26.jpeg" }
const popup = "<div><a href='https://...'><img src='" + m.image + "'/></a></div>";
document.body.innerHTML += popup;
/* css 1 */
img { height: 50px }
/* css 2 */
img { height: 350px }
推荐阅读
- c# - C#如何访问NCrontab的非公共成员?
- python - 如何在 Pipfile 中指定特定于操作系统的轮文件
- python - Dynamo - 仅当其值相同或记录不存在时才添加项目
- angular - 为什么 observable.subscribe 仅适用于构造函数
- amp-html - 将预订广告翻译到 AMP 页面
- grafana - Grafana+InfluxDB:根据自定义变量的值显示系列
- string - 如何保存渲染的模板而不是打印到 os.Stdout?
- c# - Outlook 自动完成列表从 .dat 文件中读取
- amazon-web-services - 我们可以为 AWS 中的默认 VPC 更改 Default VPC = No 吗?
- python - 使用来自爬虫的 kafka 获取数据