JSONP vs IFrame?(JSONP 与 IFrame?)
问题描述
很快我将需要构建一个小部件,我们的一些客户可以将其嵌入到他们自己的网站中.
Soon I'll be needing to build a widget that some of our clients can embed in their own websites.
为了将来证明我的小部件,嵌入代码将是这样的:
To future proof my widget the embed code would be something like this:
<script type="text/javascript" src="cGF0aC90by9yZW1vdGUvZmlsZS5qcw=="></script>
<div id="my_widget"></div>
iframe 与 JSONP 的优缺点是什么?
What are the strengths and weaknesses of iframes vs JSONP?
iframe 是否存在任何常见的基于 SEO 的问题?
Are there any common SEO based issues with iframes?
推荐答案
首先,iframe和jsonp并不是互斥的:一个是渲染手段,一个是通信手段.
First of all, iframes and jsonp are not mutually exclusive: one is a rendering mean, the other is a communication mean.
您的选择是在文档内包含(即在宿主 DOM 中创建小部件)或 iframe 内包含(即为小部件拥有一个新的、单独的 DOM)之间.
Your choice is rather between in-document inclusion (that is creating the widget within the host DOM) or in-iframe inclusion (that is having a new, separate DOM for the widget).
iframe 的优势在于沙盒:您的小部件与主机的 javascript 和 css 之间不会发生冲突.这意味着您可以安全地:
The advantage of an iframe is sandboxing: no collision between your widget and the host's javascript and css. That means you can safely:
- 使用/定义任何你想要的 javascript 库
- 使用简单的 html 代码和简单的 css 规则(这对维护来说是一个明显的好处)
至于缺点:
- iframe 很重,可能会严重减慢主机页面的渲染速度
- iframe 也会消耗更多的内存和资源,如果主机页面针对移动设备,这可能是个问题
因此,如果可以合理地假设使用您的小部件的人愿意为此调整"他们的页面,请采用文档内方式.如果没有,请使用 iframe,但要了解限制.
So, if it is reasonable to assume people using your widget will be willing to "adapt" their pages for it, go the in-document way. If not, use an iframe but understand the limits.
对于 SEO 问题,只要您动态创建小部件(无论是在文档内还是使用 iframe),搜索引擎都不会看到它.我不知道这是否是你想要的,但这就是你会得到的;)
As for SEO issues, as long as you dynamically create the widget (whether it's in-document or with an iframe), search engines won't see it. I dunno if that's what you want, but that's what you'll get ;)
这篇关于JSONP 与 IFrame?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:JSONP 与 IFrame?


- Fetch API 如何获取响应体? 2022-01-01
- 400或500级别的HTTP响应 2022-01-01
- addEventListener 在 IE 11 中不起作用 2022-01-01
- 失败的 Canvas 360 jquery 插件 2022-01-01
- Flexslider 箭头未正确显示 2022-01-01
- 使用RSelum从网站(报纸档案)中抓取多个网页 2022-09-06
- 如何使用 JSON 格式的 jQuery AJAX 从 .cfm 页面输出查 2022-01-01
- CSS媒体查询(最大高度)不起作用,但为什么? 2022-01-01
- Quasar 2+Apollo:错误:找不到ID为默认的Apollo客户端。如果您在组件设置之外,请使用ProvideApolloClient() 2022-01-01
- Css:将嵌套元素定位在父元素边界之外一点 2022-09-07