JSONP 与 IFrame?

2023-09-07前端开发问题
8

本文介绍了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?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

The End

相关推荐

ajax请求获取json数据并处理的实例代码
ajax请求获取json数据并处理的实例代码 $.ajax({ type: 'GET', url: 'https://localhost:44369/UserInfo/EditUserJson',//请求数据 data: json,//传递数据 //dataType:'json/text',//预计服务器返回的类型 timeout: 3000,//请求超时的时间 //回调函数传参 suc...
2024-11-22 前端开发问题
215

js删除数组中指定元素的5种方法
在JavaScript中,我们有多种方法可以删除数组中的指定元素。以下给出了5种常见的方法并提供了相应的代码示例: 1.使用splice()方法: let array = [0, 1, 2, 3, 4, 5];let index = array.indexOf(2);if (index -1) { array.splice(index, 1);}// array = [0,...
2024-11-22 前端开发问题
182

layui 实现实时刷新一个外部的div
主页面上显示了一个合计,在删除和增加的时候需要更改这个总套数的值: //html代码div class="layui-inline layui-show-xs-block" style="margin-left: 10px" id="sumDiv"spanSOP合计:/spanspan${totalNum}/spanspan套/span/div 于是在我们删除这个条数据后,...
2024-11-14 前端开发问题
156

layui要如何改变时间日历布局大小?
问题描述 我想改变layui时间日历布局大小,这个要怎么操作呢? 解决办法 可以用css样式对时间日历进行重新布局,具体代码如下: !DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/titlelink rel="stylesheet" href="../../layui/css/layui.css" /style#test-...
2024-10-24 前端开发问题
271

JavaScript小数运算出现多位的解决办法
在开发JS过程中,会经常遇到两个小数相运算的情况,但是运算结果却与预期不同,调试一下发现计算结果竟然有那么长一串尾巴。如下图所示: 产生原因: JavaScript对小数运算会先转成二进制,运算完毕再转回十进制,过程中会有丢失,不过不是所有的小数间运算会...
2024-10-18 前端开发问题
301

jQuery怎么动态向页面添加代码?
append() 方法在被选元素的结尾(仍然在内部)插入指定内容。 语法: $(selector).append( content ) var creatPrintList = function(data){ var innerHtml = ""; for(var i =0;i data.length;i++){ innerHtml +="li class='contentLi'"; innerHtml +="a href...
2024-10-18 前端开发问题
125