如何在 iframe 中引入短链并展示对应内容？
使用 iframe 来嵌入其他页面时，若遇到的页面地址是短链接，iframe 会因无法自动重定向而无法展示。以下两种方式可以解决这个问题：
方法一：获取长链后赋值
在父页面中，使用 JavaScript 请求短链接的实际 URL。获得长链后，将它赋值给 iframe 的 src 属性。
const shortUrl = 'http://shorturl.com/abcd';// 获取长链fetch(shortUrl) .then((res) => res.url) .then((longUrl) => { // 赋值给 iframe 的 src const iframe = document.querySelector('iframe'); iframe.src = longUrl; });
方法二：自定义拦截
如果无法获取或修改短链接，可以自定义一个拦截器来对 iframe 的请求进行修改。
重写浏览器的 fetch 函数。在拦截器中，检查请求的 URL 是否是短链接。如果是，则将其重定向到相应的长链。
// 拦截 fetch 请求const originalFetch = window.fetch;window.fetch = (url, ...args) => { // 检查是否为短链接 if (isShortLink(url)) { // 获取长链接 return fetch(getLongLink(url), ...args); } // 其他请求照常处理 return originalFetch(url, ...args);};
通过这两种方式，可以实现 iframe 引入短链并正确展示相应内容。
以上就是如何使用 iframe 引入短链并展示对应内容？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1556241.html
微信扫一扫 
支付宝扫一扫 
