使用 html iframe 时显示标题标签“弹出”

Posted

技术标签:

【中文标题】使用 html iframe 时显示标题标签“弹出”【英文标题】:Make title tag "popup" show when using html iframe 【发布时间】:2013-05-27 20:36:45 【问题描述】:

...问题总结...

工作示例

标题属性在图片上效果很好,for example

<img
    src="http://imgs.xkcd.com/comics/the_general_problem.png"
    title="I find that when someone's taking time to do something right in the present, they're a perfectionist with no ability to prioritize, whereas when someone took time to do something right in the past, they're a master artisan of great foresight."
    
>

问题(不起作用的示例)

我正在尝试嵌入 iframe 视频,例如当您在 YouTube 或(在本例中)SouthPark Studios 上点击“分享此视频”时

似乎:

我不知道与 iframe element 一起使用的正确 属性(它显然不是“标题”),或者 “title”是正确的,但 iframe 以某种分层问题胜过它。见下文



...进一步阅读:我已经尝试过的详细信息...

第一次尝试:将其包裹在一个 div 中,并赋予 div 最大层

<div
    title="South Park video about Ginger Kids coming in the night to carry off the town's other kids"
    style="z-index: 2;"
>
    <iframe
        src="http://media.mtvnservices.com/embed/mgid:arc:video:southparkstudios.com:1feaa96c-ed01-11e0-aca6-0026b9414f30"
        
        
        frameborder="0"
    >
    </iframe>
</div>

来源:https://***.com/a/7117107/1421642,用于 divhttp://www.echoecho.com/csslayers.htm,用于层(z-index)


第二次尝试:将“title”放入 iframe 标签中

<iframe
    title="South Park video about Ginger Kids coming in the night to carry off the town's other kids"
    src="http://media.mtvnservices.com/embed/mgid:arc:video:southparkstudios.com:1feaa96c-ed01-11e0-aca6-0026b9414f30"
    
    
    frameborder="0"
>
</iframe>


两次尝试的结果

El zilcho

在这两种情况下,我mouse over the iframe and nothing happens。将其与我一开始的“有效示例”代码进行比较,您可以在其中 mouse over and see a beautiful little popup

请帮忙:)

【问题讨论】:

【参考方案1】:

您可以为 iframe 指定标题,但它不会出现在工具提示中。将 frameborder 更改为“2”,然后将光标移到它上面,就会出现一个标题。

要查看 iframe 上的标题,您必须设置 iframe 内容的标题,而不是 iframe 本身。 (How to display tooltip when mouse hover iframe)

http://jsfiddle.net/2YGNx/

html

    <iframe frameborder="1" src="javascript:'<div>Helllo World</div>';" style="width: 100%; height: 100%; margin: 0px; padding: 0px;position:relative;" title="hello world" id="contentIframe"></iframe>

Javascript:

$(document).ready(function ()     
   $("#contentIframe").contents().find("body").find('div').attr('title','Hello world');

);

但是,因为您正在处理的是 Flash 视频,所以它不会那样工作。 Flash 喜欢“接管”作为扩展,浏览器不会将其视为“页面的一部分”,因为它会显示工具提示。最好的办法是创建一个以视频 url 作为源的对象,然后将 wmode 设置为透明。 (CSS Hover Tooltip Bubble Being Hidden Behind iFrame Video)

【讨论】:

因此 iframe 用于视频以外的内容,在这种情况下标题可以正常工作。但是 iframe + 视频 = 我已经筋疲力尽了。在 那个 的情况下,您说根本不使用 iframe,使用 html object?您能否在 that 的答案中添加一个 jsfiddle 示例,好吗?我不仅无法使用您的第二个链接中的代码获得标题 - 它实际上完全破坏了我的视频。这是我尝试的 jsfiddle:jsfiddle.net/bukov/Ru4SW 注意:即使您可以修复我链接的那个 jsfiddle 示例中的 &lt;object&gt; 内容,请注意它们都没有解决原始问题:标题。我知道您的解决方案希望我使用wmode="transparent",但我不明白这如何让我获得我的头衔。在我的原始帖子中,我是否将其与上面的“尝试 #1”结合起来?外部的“包装器 div”和 that 有一个标题? 哦,嗯。我想我没有想到这一点。也许如果你把那个对象放在一个 iframe 中,然后使用它......但真的。这样做似乎需要做太多的工作。工具提示是否必要? 所以你的答案是“放弃”? :( 我的回答是“嗯,没有什么必要”。没有生命取决于我的 html 代码在美学上是否 100% 完美或任何东西。然而,这就是SO的存在,不是吗?标题文本是为盲人描述单张图片。视频也是图片,它们只是移动图片。标题文本似乎对他们来说和图片

以上是关于使用 html iframe 时显示标题标签“弹出”的主要内容,如果未能解决你的问题,请参考以下文章

加载 iframe 并更改其源时显示加载符号?

在页面加载时显示Tinybox 2弹出框

如何在 Kendo Multiselect 中悬停时显示弹出窗口

如何在选择图像时显示弹出框

使用jquery在popover上将值传递给iframe

向下滚动Angular时显示导航栏