克服 iOS HTML5 音频的局限
简介过去几年，开发人员一直都在制造完善的交互体验，努力使其可以在浏览器中正确运行。这样的站点通常需要使用浏览器插件 (Flash)。随着智能手机和平板电脑的推出，交互体验看似与新的小部件能够完美匹配。但是，由于移动设备的处理能力有限，浏览器插件不再是一种可行的开发平台。HTML5 已经添加了大量无需额外插件的使用的工具。W3C 的 HTML5 规范仍在开发之中，但是在规范开发过程中，浏览器已经开始提供支持。HTML5 音频是一个巨大的进步，它允许在浏览器中嵌入声音，尤其是在移动设备中，比如 iOS 的移动版 Safari 浏览器上。尽管 HTML5 音频是一个新特性，但已提供了 iOS 支持。根据流行的移动应用程序 Instapaper 的开发人员报导，2011 年 11 月，其 iOS 用户中有 98.8% 都在使用 iOS 4 或更高版本（请参阅 ）。由于 HTML5 音频是在 iOS 3 中引入到移动版 Safari 中的，所以您可以放心，iOS 平台为 HTML5 音频提供了广泛的支持。在文本中，您将了解 HTML5 在桌面上和移动版 Safari 内的局限性，并尝试采用一些解决方案来创建交互的声音效果。本文涵盖的其他内容包括：不受支持的事件、audio sprite 以及如何使用 directCanvas 和 multiSound 加速 HTML5 游戏性能。有一点非常值得关注：对于 iOS 6，Apple 已经添加了对 Web Audio API（讨论如下）的支持，因此不再需要使用本文中所讨论的许多变通方法。不过，iOS 6 刚刚面世不到几周时间，所以 iOS 5 仍然是市场的主流。本文中所讨论的问题以及所提供的变通方式仍有效，应该在为移动版 Safari 开发声频时考虑使用它们。您可以
本文中使用的示例的源代码。HTML5 音频的局限性在讨论移动版 Safari 中的局限性之前，有必要理解 HTML 音频在桌面上的局限性。HTML5 音频虽然很健壮，但有其局限性，这主要取决于它的实现。对于音乐播放器（点唱机播放器）或简单的声音效果，它很有效，但是对于声音密集的应用程序如游戏，它的表现不是很理想。格式支持不幸的是，并不是所有浏览器都支持相同的视频文件格式。如表 1 所示，目前有四种主要格式：MP3、OGG、WAV 和 AAC。表 1. HTML5 视频格式支持Ogg VorbisWAVPCMAACInternet Explorer 9XXFirefoxXXChrome/Safari/移动版 SafariXXX
为了涵盖所有浏览器，最好是让所有的视频流都具有 Ogg Vorbis 和 AAC 两种格式。为什么没有包括 MP3？MP3 在进行商业传播时需要支付繁重的版税。MP3 的授权要求对于所有超过 $100K 的数据收取 2% 的传播费（请参阅 ）。出于这个原因，我更倾向于使用 AAC 而非 MP3。AAC 也并非完全免版税的，但它对于免费传播的许可没有那么严格。AAC 还提供了更好的压缩，文件可以更小，它是 Web 领域的福音（请参阅 ）。Ogg Vorbis 之所以压倒性地获得了我的喜爱是因为它是开源的、无专利费并且免版税的。不过，只有 Firefox 支持它。清单 1 显示了跨浏览器兼容 HTML 标记。清单 1. 音频元素的 HTML 标记&audio&
// AAC file (Chrome/Safari/IE9)
&source src="sound.m4a" type="audio/mpeg" /&
// Ogg Vorbis (Firefox)
&source src="sound.ogg" type="audio/ogg" /&
&/audio&处理和效果在处理音频时，一个强大的特性是处理声音的能力。无论动态合成声音、处理声音效果、应用环境效果，还是进行基本的立体声平移，HTML5 音频缺乏所有这些处理能力。您加载的视频就是将要播放的视频。Web Audio API (Chrome) 和 Audio Data API (Firefox) 无需任何浏览器插件即可进行合成和动态处理音频的能力帮助您解决了特性缺失的问题（请参阅 ）。这两种 API 均在开发当中，仅在 Chrome 14+ 和 Firefox 4+ 中受支持。不幸的是，在实现方面这二者差异很大。目前有一些表现不错的库可用来使支持正规化，比如 audiolibjs（请参阅 ）。Chrome 的 Web Audio API 就是通过 W3C 推广的标准。单音频层（多音的）要重复播放声音本身，必须实例化此声音的一个单独的音频对象。在标记和能够播放的音频之间存在 1:1 的对应。对于当前状态的 HTML5 音频，是无法分层的。其他平台，比如 Flash，可以分出一个单独的音频对象，无需创建一个新的音频对象。iOS、移动版 Safari 和 HTML5 音频的限制 HTML5 音频本身多少存在一些限制，而移动版 Safari 则向 HTML5 音频最基本的使用添加了其他的限制。单音频流移动版 Safari 带来的最大的局限之一是一次只能播放一个单音频流。移动版 Safari 中的 HTML5 媒体元素都是单例的，所以一次只能播放一个 HTML5 音频（和 HTML5 视频）流。Apple 为这一局限做过解释，但我们推断这是为了减少数据费用（这也是大多数 iOS HTML5 其他局限的原因所在）。iOS 为移动版 Safari 提供了单一
HTML5 媒体（音频和视频）容器。如果想要在播放一个音频流的同时播放另一个音频流，那么就会从容器中删除前一个音频流，新的音频流将会在前一个音频流的位置上被实例化。清单 2 显示了在一个流播放的同时调用 play() 如何会停止之前的流，在本例中该流为 audio1。清单 2. 单音频流var audio1 = document.getElementById('audio1');
var audio2 = document.getElementById('audio2');
audio1.play(); // this stream will immediately stop when the next line is run
audio2.play(); // this will stop audio1 本例的效果。有一点很重要，务必牢记，音频和视频是可以互换的。如果在视频播放的同时要播放音频文件，那么视频就会停止。一次只能播放一个音频或视频流，如清单 3 所示。清单 3. 可互换的音频视频流var audio = document.getElementById('audio');
var video = document.getElementById('video');
video.play();
// at a later time
audio.play(); // this will stop video自动播放在移动版 Safari 中加载的页面上，不能自动播放音频文件。音频文件只能从用户触发的触摸（单击）事件加载。如果在 HTML 标记中使用了 autoplay 属性，那么移动版 Safari 将会忽略这个属性，并且不会在加载页面时播放此文件，如下所示： &audio id="audio" src="audio_file.mp3" autoplay&&/audio&Safari Developer Guide 上有有关于此的详细信息（请参阅 ）。加载音频除非由用户接触事件，比如通过 onmousedown、onmouseup、onclick 或 ontouchstart 触发事件，否则不能加载音频流。图 1 显示了这样的一个示例。图 1. 在移动版 Safari 中加载音频的工作流如果在加载页面时运行清单 4 中的代码，那么在移动版 Safari 中不会加载视频流，甚至不会下载该视频流。清单 4. 在页面加载时播放音频流在默认情况下会失败var audio = document.getElementById('audio');
audio.play();即便是 HTML markup 中使用了 preload 属性，移动版 Safari 仍会忽视此属性，并且不会加载此文件，除非由用户触摸事件，如清单 5 所示。清单 5. 移动版 Safari 中不支持 preload 属性&audio id="audio" src="audio_file.mp3"
preload="auto"&&/audio& 本例的效果。在桌面 Safari 上，在加载页面时， 中的代码会下载此音频文件。但是，在移动版 Safari 上，此属性会被忽视，并且不会下载此音频文件。其他的怪癖在移动版 Safari 中使用 HTML5 音频还有其他几个怪癖需要考虑。在初始化一个新的音频流时会有几秒的延时，这是因为 iOS 需要实例化一个新的音频对象。清单 6 显示了如何遭遇这种延时。清单 6. 在切换音频对象时的 HTML5 音频延时var audio1 = document.getElementById('audio1');
var audio2 = document.getElementById('audio2');
audio1.play();
// at a later time
audio2.play();
// there will be a few-seconds delay as iOS is instantiating a new audio object.
// at an even later time
audio1.play(); // there will also be a few-seconds delay, as the audio object
// for audio1 in iOS was destroyed when we played audio2. 本例的效果。重要的是确保您的逻辑不会假设音频流是在加载页面时载入的。调用 play() 在默认情况下会失败，如果在将要加载但尚未载入其元数据的音频流上尝试设置 currentTime，则会抛出一个致命错误，如清单 7 所示。清单 7. 在一个尚未载入其元数据的音频流上设置 currentTime// run on page load
var audio = document.getElementById('audio');
audio.play(); // This will silently fail
audio.currentTime = 2; // This will throw a fatal error because the metadata
// for the audio does not exist 本例的效果。音频文件不能缓存在 iOS 上的移动版 manifest 中。只有在对某个离线应用程序使用清单 (manifest) 时，这才适用。如果一个音频文件包含在此清单中，iOS 将会忽略它，并且不会缓存此文件。每当此 Web 应用程序需要访问此音频文件时，都需要从该网络访问此文件。用 JavaScript 以编程方式进行相关设置时，移动版 Safari 并不会尊重此音量和 playbackRate 属性。更改属性也不会实际调整这些值。音量总是在用户控制下，并且 playbackRate 在移动版 Safari 中仍然不受支持。音量总是保持设置为 1，playbackRate 则会设置为希望设置的新值，但是音频流回放的实际速度不会发生改变。这会为 onratechange 事件带来某些复杂性，我们将在
部分对此进行讨论。在 iOS 5 之前，循环属性是不受支持的。为了解决缺乏支持的问题，可以向 onended 事件添加了一个事件侦听程序，并在该函数中调用 play()。清单 8 显示了一个例子。清单 8. iOS & 5 的音频循环变通方案var audio = document.getElementById('audio');
audio.play();
var onEnded = function() {
this.play();
audio.addEventListener('ended', onEnded, false); 本例的效果。解决方案用来解决移动版 Safari 中 HTML5 音频的缺陷的解决方案完全取决于具体用法。如果您只想播放一个单一音频文件或音频文件的播放列表，那么无需做太多更改。但是，如果需要获得交互的声音效果，那么事情就有些棘手了。单个音频流单个音频流局限的一种解决方案是用所需音频置换出源文件，如清单 9 所示。这不是一种理想的解决方案，因为您需要等待加载新的音频流后才能播放它。清单 9. 置换一个音频对象的源文件var audio = document.getElementById('audio');
audio.play();
// at some later point in your script (does not need to be from a touch event)
audio.src = 'newfile.m4a';
audio.play(); // there will be a slight delay while the new audio file loads 本例的效果。应对单个音频流局限性的一种更好的解决方案是使用 audio sprite。简言之，您要将所有的音频综合到一个单音频流中，然后播放此流的各个部分。 部分提供了更详细的信息。自动播放对于自动播放的局限性，没有变通方案。正如前面所提及的，音频流只能从用户触摸事件加载。当针对移动版 Safari 进行开发时，重要的一点是要在必要时调整您的工作流，以适应这个局限性。（以我的经验来看，我知道如果在一开始没有将这些考虑在内，那么将来会发生很多重构。） 在 iOS 4.2.1 之前，可以从一个同步 Ajax 调用的回调来加载音频文件，如清单 10 内的示例所示。清单 10. iOS 4.2.1 之前，可以在一个 Ajax 调用的回调中加载一个音频流// run on page load
var audio = document.getElementById('audio');
jQuery.ajax({
url: 'ajax.js',
async: false,
success: function() {
audio.play(); // audio will play in iOS before 4.2.1
}); 这个例子的效果。清单 10 中的方法存在一个问题：因它是一个同步 Ajax 调用，所以浏览器是锁定的，直到调用结束为止。在移动版 Safari 中，锁定并不只是意味着页面锁定，整个应用程序都会锁定。如果有错误发生，并且移动版 Safari 陷入锁定状态（可能性不是很大），那么退出浏览器的惟一方式是单击 home 按钮并强制关闭应用程序。Apple 在 iOS 4.2.1 中修复了这种变通方式，所以这种变通方法在 iOS 4.2.1 和后续版本中是不起作用的。加载音频音频流只在用户事件触发时才能加载。如清单 11 所示，onmousedown、onmouseup、onclick 和 ontouchstart 都是一些可用的事件，当在一个回调中调用它们时，可成功加载一个音频流。请注意，这种情况只适用于加载一个音频文件时，在一个已经加载的文件上调用 play() 会按预期的那样工作。清单 11. 使用一个事件触发事件来加载一个音频流// run on page load
var button = document.getElementById('button');
var audio = document.getElementById('audio');
var onClick = function() {
audio.play(); // audio will load and then play
button.addEventListener('click', onClick, false); 本例的效果。 乍一看，清单 11 更像是一个烦人的变通方案。但是，最好是为您的游戏或交互式体验提供一个启动屏幕，如图 2 所示，要求用户单击一个按钮来启动。当用户单击 start 按钮时，您可以使用该事件在您的项目中加载音频。图 2. 割绳子游戏的 HTML5 启动屏幕不受支持的事件虽然移动版 Safari 中的 HTML5 音频支持来自桌面的所有媒体事件，但要注意的是，由于之前提到的几个不受支持的属性，某些事件永远都不会触发。还有几个怪癖需要注意。表 2 列出了此音频元素的所有事件回调及其在桌面和移动版 Safari 上的兼容性。结果是以作者设置的 HTML5 音频
为基础的，如果您愿意，尽可以去尝试。表 2. 桌面和移动版 Safari 对媒体事件的支持如下列表提供了有关几个事件回放的一些注意事项。ratechange每当 playbackRate 发生更改，都会触发 ratechange 事件。正如之前提到的，移动版 Safari 不支持更改音频流（以及视频）的回放，所以 playbackRate 不应触发。但是，自 iOS 5.1.1 起，HTML5 音频仍会触发 ratechange 事件，即便实际的回放速度并未发生改变。volumechange使用 JavaScript 不能更改音量，所以从不会触发 volumechange 事件。即便在移动版 Safari 打开时用户在其设备上更改了音量，也不会触发这个事件。seeking/seeked当这种寻找是通过 JavaScript 完成的时候，移动版 Safari 只支持 seeking 和 seeked 事件，如清单 12 所示。如果显示了内置控件，并且用户使用了进度条进行寻找，那么不会按照预期的方式触发 seeking 和 seeked。清单 12. 设置 currentTime 将会触发 seeking 和 seeked 事件var audio = document.getElementById('audio');
audio.currentTime = 60; // seeking and seeked will be firedAudio sprite使用 audio sprite 是满足移动 Safari 中多音效需求的最佳解决方案。与 CSS image sprite 类似，audio sprite 可以将所有的音频综合到一个音频流，如图 3 所示。图 3. Audio sprite原理很直观。您需要存储每个 sprite 的数据：开始点、结束点（或长度）和一个 ID。当您想要播放某个 sprite 时，需要将此音频流的 currentTime 设为开始位置并调用 play()。清单 13 显示了这样的一个示例。清单 13. 简单的 audio sprite 实现// audioSprite has already been loaded using a user touch event
var audioSprite = document.getElementById('audio');
var spriteData = {
length: 1.1
start: 1.3,
length: 1.1
start: 2.7,
length: 0.8
// play meow2 sprite
audioSprite.currentTime = spriteData.meow2.
audioSprite.play();清单 13 将会播放 meow2 sprite，此外，因为没有实现当 sprite 完成后即停止的逻辑，它还会播放一个发出呜呜声的精灵。通过向清单 14 中的 ontimeupdate 事件添加事件侦听程序，还可以观看 currentTime，并在 sprite 到达其结尾时结束此音频。清单 14. 添加当到达 sprite 的结尾时停止流的逻辑var handler = function() {
if (this.currentTime &= spriteData.meow2.start + spriteData.meow2.length) {
this.pause();
audioSprite.addEventListener('timeupdate', handler, false); 本例的效果。使用 audio sprite 的一个巨大好处是在 sprite 间切换时没有延时（类似于在音频流间切换时，假设整个 audio sprite 已经加载）。让所有的流位于一个文件中也优于削减 HTTP 请求。清注意，更改 currentTime 并不是百分百正确的。将 currentTime 设为 6.5，而实际得到的却是 6.7 或 6.2。每个 A
sprite 之间需要少量的空间，以避免寻找到另一个 sprite 的尾部。添加这个空间会增加少许延时，如果流寻找到 6.4，而 sprite 开始于 6.8 秒。在访问任何 sprite 之前，务必确保整个音频流均已加载。这很重要，因为如果音频流没有完全加载，那么在想要访问已加载的流的任何一个部分时，那么这个流需要进行缓冲，而且还会在流加载过程中发生延时。功能全面的示例 一个 audio sprite 框架的示例。这个示例考虑到了本文所讨论的这些主题。directCanvas 和 multiSound 如何加速 HTML5
游戏性能AppMobi 开发了一个有趣的解决方案，用 directCanvas 和 multiSound 克服移动设备上的各种 HTML5 局限性（请参阅 ）。directCanvas 和 multiSound 在一个标准的 HTML5 浏览器中应用程序使用了设备的固有功能。缓慢的图片性能以及本文所讨论的这些局限性都不再是问题；您可以获得一个原生应用程序的全部性能益处。当一个用户导航到使用了 directCanvas 的站点时，页面会提醒该用户从 App Store 下载 MobiUs 应用程序。如果用户已经在其设备上安装了此应用程序，那么页面就会在
MobiUs 应用程序中打开。AppMobi 的站点上有在 MobiUs 应用程序中运行游戏与在移动版 Safari 中运行游戏的并排对比视频。结果很是惊人，性能获得了 10 倍的提升，如图 4 所示。图 4. 使用 directCanvas 获得的从移动版 Safari 到 MobiUs 应用程序的平均 HTML5 性能改进AppMobi 的 API 站点上有一些不错的文档，所以您可以立即查阅这些文档。SDK 可免费下载获得，而且还提供一个很顺手的 Google Chrome 扩展，可方便您在自己的桌面浏览器中进行开发。虽然要求用户在其设备上安装一个应用程序并不是很理想，但 AppMobi 有一个能够博得认同的有趣解决方案。目前，App Store 还没有提供 MobiUs 应用程序，但相信 MobiUs 很快就可以上线了。结束语尽管本文讨论了 HTML5 音频的一些局限性，但是 HTML5 音频是对移动版 Safari 的一个很受欢迎的补充，您应该充分利用它。在本文中，我们了解了 HTML5 音频在桌面和移动版 Safari 上的限制，遍历了这些限制的解决方案，并探讨了在移动版 Safari 中使用 audio sprite 的优势。意识到移动版 Safari 的局限性可帮助提升它对您的可用性。作为一个仍在制定中的规范，HTML5 音频必然会不断发展，但没有理由等到规范在 2014 年（推测）最后完成后才使用它。HTML5 音频提供了对所有 iOS 用户的几乎全局的兼容性，没有理由不使用它。
下载资源 (html5audio.article.source.zip | 4073KB)相关主题：从使用 Instapaper 应用程序的人们了解最新的数据和趋势。
：获得 mp3、mp3HD 以及 mp3surround 专利和许可信息。
：了解有关许可产品（除了 PC 软件）标准率。
：阅读 Wikipedia 上有关 HTML5 音频的更多信息。
HTML5 音频缺乏处理声音的功能。阅读
是如何帮助解决特性缺失，并为您提供无需浏览器插件即可动态合成并处理音频的功能。
：获得这个问题的答案。
appMobi 如何使用 directCanvas 和 multiSoundhas 克服 HTML5 的缺陷。
：了解使用 HTML5 嵌入音视频时的几点考虑。：从这个 Safari Extensions Development Guide 了解有关的更多信息。
：阅读 HTML5 Rocks 网站上的这篇文章。
：在 MozillaWiki 上更多地了解 Audio Data API。
：查看来自 W3C 的官方规范。
：探索与 W3C 一起致力于调优 HTML5 的开发者社区。
：寻找涵盖了各种基于 Web 的解决方案的文章。参阅
来获得大量技术文章和提示、教程、标准和 IBM 红皮书。：安装这个可用于 JS 内音频编写的强大工具箱。
下载 directCanvas SDK 这个 HTML5 游戏加速技术集来克服 HTML5 的几个缺点。
：下载或 ，并开始使用来自 DB2®、Lotus®、Rational®
、Tivoli® 和 WebSphere® 的应用程序开发工具和中间件产品。
添加或订阅评论，请先或。
有新评论时提醒我
static.content.url=http://www.ibm.com/developerworks/js/artrating/SITE_ID=10Zone=Web developmentArticleID=848287ArticleTitle=克服 iOS HTML5 音频的局限publish-date=公告：由于博客https升级,原博客引用http链接失效，预览及部分图片效果请查看源代码！
iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案
50111次浏览
做touchweb开发的时候，做头疼的是，电脑上面时候好的，有些手机上面也是好的，个别手机和浏览器出现问题，对于这些，只能慢慢调试，找问题。
今天说一下比较老的IOS的问题，那就是“iOS下的 Fixed + Input 调用键盘的时候fixed无效问题”。
&body class=&layout-fixed&&
&!-- fixed定位的头部 --&
&!-- 可以滚动的区域 --&
&!-- 内容在这里... --&
&!-- fixed定位的底部 --&
&input type=&text& placeholder=&Footer...&/&
&button class=&submit&&提交&/button&
对应的样式如下：
header, footer, main {
height: 50
height: 34
bottom: 0;
margin-top: 50
margin-bottom: 34
height: 2000px
然后看起来就是下面这个样子。拖动页面时 header 和 footer 已经定位在了对应的位置，目测没问题了。
但接下来问题就来了！如果底部输入框软键盘被唤起以后，再次滑动页面，就会看到如下图所示：
我们看到 fixed 定位好的元素跟随页面滚动了起来… fixed 属性失效了！
这是为什么呢？简单解释下： & 软键盘唤起后，页面的 fixed 元素将失效（即无法浮动，也可以理解为变成了 absolute 定位），所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。
这便是 iOS 上 fixed 元素和输入框的 bug 。其中不仅限于 type=text 的输入框，凡是软键盘（比如时间日期选择、select 选择等等）被唤起，都会遇到同样地问题。
虽然 isScroll.js 可以很好的解决 fixed 定位滚动的问题，但是不在万不得已的情况下，我们尽量尝试一下不依赖第三方库的布局方案，以简化实现方式。这里抛砖引玉作为参考。
既然在 iOS 下由于软键盘唤出后，页面 fixed 元素会失效，导致跟随页面一起滚动，那么假如——页面不会过长出现滚动，那么即便 fixed 元素失效，也无法跟随页面滚动，也就不会出现上面的问题了。
那么按照这个思路，如果使 fixed 元素的父级不出现滚动，而将原 body 滚动的区域域移到 main 内部，而 header 和 footer 的样式不变，代码如下：
&body class=&layout-scroll-fixed&&
&!-- fixed定位的头部 (absolute绝对定位也可以)--&
&!-- 可以滚动的区域 --&
&div class=&content&&
&!-- 内容在这里... --&
&!-- fixed定位的底部 （absolute绝对定位也可以）--&
&input type=&text& placeholder=&Footer...&/&
&button class=&submit&&提交&/button&
header, footer, main {
position://或者absolute
height: 50
position://或者写成absolute
height: 34
bottom: 0;
/* main绝对定位，进行内部滚动 */
bottom: 34
/* 使之可以滚动 */
overflow-y:
/* 增加该属性，可以增加弹性，是滑动更加顺畅 */
-webkit-overflow-scrolling:
main .content {
height: 2000
另外，这里的 header 和 footer 使用的是 fixed 定位，如果考虑到更老一些的 iOS 系统不支持 fixed 元素，完全可以把 fixed 替换成 absolute 。测试后效果是一样的。
按照上面布局，就不会出现问题了！
另外一种方案
这个方案是最近在网上看到的，我没有使用过，但是看到案例是没有问题的，感兴趣的可以去看下，我在中已经发布了这个方案。
地址如下：
欢迎访问留言！
相关文章：
关键词搜索iOS原生App与H5页面交互笔记 - 简书
iOS原生App与H5页面交互笔记
最近在做一个项目用到了原生App与H5交互，之前有做过简单的H5页面直接调用原生方法的例子，就是利用UIWebView中的代理方法//webview每次加载之前都会调用这个方法,利用该代理方法截取JS的href来调用原生的方法- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType
然而这次的交互要求是进行双向通信，即JS调用原生App的方法之后，原生App要讲相关参数信息返回给H5页面，H5页面接受到参数信息后做其他处理。例：H5页面的发布信息按钮，在点击按钮后要在原生端判断用户是否登录，若没有登录则弹出原生登录页面，登录成功后将用户信息返回给H5页面，继续发布流程。重点来了！在这里推荐一个比较好的第三方库即： 地址：https://github.com/marcuswestin/WebViewJavascriptBridge通过使用该库可以轻松实现JS与原生交互。//初始化WebViewJavascriptBridge方法_bridge= [WebViewJavascriptBridge bridgeForWebView:self.BookWebView webViewDelegate:self handler:^(id data,WVJBResponseCallback responseCallback) {}];//原生与JS约定接口名为“testObjcCallback”，data是JS传递过来的信息，responseCallback来将信息传递给JS[_bridge registerHandler:@"testObjcCallback" handler:^(id
data,WVJBResponseCallback responseCallback) {responseCallback（"postInfomationToJS"）}];UIWebView页面信息的离线缓存推荐一个比较好的第三方库 ，只需要在AppDelegate中加入下面方法即可。[NSURLProtocolregisterClass:[RNCachingURLProtocolclass]];地址:https://github.com/rnapier/RNCachingURLProtocol
https://github.com/MikeZhangpy
作者MikeZhangpy关注 转载自：http://www.jianshu.com/p/4ed3e5ed99c6 最近在做一个项目用到了原生App与H5交互，之前有做过简单的H5页面直接调用原生方法的例子，就是利用UIWebView中的代理方法 //webview每次加载...
最近在做一个项目用到了原生App与H5交互，之前有做过简单的H5页面直接调用原生方法的例子，就是利用UIWebView中的代理方法 //webview每次加载之前都会调用这个方法,利用该代理方法截取JS的href来调用原生的方法 - (BOOL)webView:(UIWeb...
前言：iOS 开发中，h5 和原生实现通信有多种方式， JSBridge 就是最常用的一种，各 JSBridge 类库的实现原理大同小异，这篇文章主要是针对当前使用最为广泛的 WebViewJavascriptBridge（v6.0.2），从功能 API、实现原理到源码解读...
iOS原生App与H5页面交互笔记WKWebview 交互实现Http与iOS以及网页交互
转：http://www.jianshu.com/p/4ed3e5ed99c6
1.应该把格局放大些，甘肃就这点破地儿，局的人全是低文化素质的人，为什么偏安一隅等着人？ 老家村里，家里也是一样的。 2、如何优雅的玩转豆瓣。 3、新周刊等这些媒体文章也得多看看 4.像学习篮球技术一样学习处事，精心整理。各种方面，下次一定比这次做得好。 学到一点就立即总结...
马克思曾说过，人的本质是一切社会关系的总和。 同样道理，互联网环境下的用户行为也会是如此。 我们可以把这理解为，用户在进行社交行为时，人性是孤独的，需要从社会环境中寻找关系来解决此刻的孤独感。 而微信刚好就能够满足该需求，因为其本身就是一款社交工具。 相信这时候，绝对有人会...
2017年自己的小目标，存钱，减肥！ That's all！
好莱坞黄金时代的女星们，各个都富有迷人而又独特的气质。她们的气质浑然天成，散发着无与伦比的美丽。 01 落入人间的天使 赫本有一双小鹿般灵动的眼睛。也许很多人不知道，她在二战期间曾经为盟军收集情报，后来因为食物短缺，营养不良，才变得如此消瘦。 赫本的美在于她的天真、善良。在...
《雪中悍刀行》的江湖伴随我已四年有余，期间我历经两次高考，岁月恍惚而今已是大三，年岁增长不只丰富了经历，心态也是岁岁不同。曾经看的是江湖侠客的快意恩仇，也羡慕文人雅士的名士风流，现在读来更多的是江湖路远，人家平常。庙堂上的诡谲难测，战场上的波澜壮阔，仙...