JSONP 与 IFrame?

JSONP vs IFrame?(JSONP 与 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="path/to/remote/file.js"></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?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Update another component when Formik form changes(当Formik表单更改时更新另一个组件)
Formik validation isSubmitting / isValidating not getting set to true(Formik验证正在提交/isValiating未设置为True)
React Validation Max Range Using Formik(使用Formik的Reaction验证最大范围)
Validation using Yup to check string or number length(使用YUP检查字符串或数字长度的验证)
Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
password validation with yup and formik(使用YUP和Formick进行密码验证)