蓝叶

蓝叶分享emlog模版、emlog插件、zblog插件、zblog模版、帝国模版、绿色软件、蓝叶原创作品等众多精选好资源。
现在位置:首页 > 网站设计 > 巧用iframe标签srcdoc属性制作点击加载调用代码

巧用iframe标签srcdoc属性制作点击加载调用代码

蓝叶    网站设计    2022-09-08    492    0评论    

在页面使用iframe标签调用外部页面或视频等,会增加页面载入的时间,为了让iframe框架调用不影响页面加载速度,蓝叶分享下可以巧用iframe标签srcdoc属性制作点击加载调用的方法代码,让用户点击按钮加载框架,这样就不会影响到页面加载速度了,代码如下有需要的拿去使用吧。

//注意把页面网址跟图片网址替换修改成你自己的
<iframe width="600" height="360" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}span.icon-play{width: 60px;height:60px;display: inline-flex;align-items:center;justify-content:center;background:#037DD6;border-radius: 100%}img,span.overlay,vodep{position:absolute;width:100%;top:0;bottom:0;margin:auto;height:100%}span.overlay{text-align:center;font:48px/1.5 sans-serif;color:white;width: 100%;height: 100%;display: inline-flex;align-items: center;justify-content: center;background: rgba(0,0,0,0.5);transition: background 300ms ease;}span:hover{background: rgba(0,0,0,0.3)!important;}</style><a href=页面网址><img src=图片网址><span class=&quot;overlay&quot;><span class=&quot;icon-play&quot;><svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;23&quot; height=&quot;28&quot; viewBox=&quot;0 0 23 28&quot; fill=&quot;none&quot;>\n        <path fill-rule=&quot;evenodd&quot; clip-rule=&quot;evenodd&quot; d=&quot;M0.976562 13.7469V25.0549C0.976562 26.6431 2.73876 27.5977 4.0691 26.7301L21.4079 15.4222C22.6178 14.6331 22.6178 12.8608 21.4079 12.0717L4.0691 0.763819C2.73876 -0.103793 0.976562 0.850786 0.976562 2.43904V13.7469Z&quot; fill=&quot;white&quot;/>\n        </svg></span></span></a>"></iframe>
评论一下 分享本文 赞助蓝叶

赞助蓝叶X

扫码赞助蓝叶
联系站长
蓝叶
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论
加载中....
快捷导航 返回顶部
付费服务
音乐欣赏
友情链接
保存桌面
给我留言
返回顶部