这太疯狂了。我正在这个网站上为一个客户端开发,用户可以将嵌入代码从 youtube 粘贴到屏幕上的文本区域。他们单击“添加”,代码被放入对象的属性中,该属性又被推到数组的末尾。然后你会看到你的视频“列表”,还有一个“新”按钮可以添加更多。一旦您单击页面上的“新建”按钮添加第二个,IE 就会冻结。我已经尝试过 IE 9——它几乎 100% 的时间都在运行——一旦它起作用了,但我先添加了其他东西。
IE10 似乎工作正常,但我可以发誓我之前在那里遇到过这个问题 - 但今晚,它看起来确实很好。
更新:刚刚在 Windows XP 上测试了 IE8 - 没有问题。
经过多次调试,我相信我实际上得出了一个疯狂的结论,即如果 iframe 是 560 像素或更宽,它会崩溃......如果你将大小更改为 550,没问题......所有这一切,而 iframe 有问题实际上不在页面上(您可以预览它,但默认情况下它不会显示甚至注入到页面中。)
其他一些注意事项:
我尝试插入一个简单的 iframe,只是一个 src 属性 - 没有问题。
我尝试插入一堆 html - 没问题。
我尝试插入无效的 html - 没有问题。
我拿了 YouTube 的代码,更改了 URL - 有问题。
我尝试手动重新输入 YouTube 的代码 - 遇到了问题(当我尝试这个时希望有一些奇怪的编码或其他东西。)
该网站即将完成,因此非常感谢您提供任何帮助!
为了您的方便,我设置了一个站点来实际查看:
您需要先登录:
用户名:test@testers.com
密码:test1234
然后继续 /submit 或单击导航中的“出售您的汽车”,然后单击后续页面上的“快速列出”。
您可以立即转到“YouTube 视频”标签并尝试一下 - 您不必在标签中按自己的方式工作...
这是一些代码(CoffeeScript & Jade - JavaScript & HTML 可以在网站上看到...)
在控制器的早期,我将视频列表初始化为一个空数组:
$scope.formData =
videos: []
这是提交新视频时调用的方法(略微编辑)
$scope.addVideo = ->
v = {
id: 0
code: $scope.new_video.code
listing_id: $scope.listing_id
}
$scope.formData.videos.push v
$scope.new_video.adding = false # hides the "add" form.
$scope.new_video.code = ''
在列表编辑器中呈现视频选项卡的 HTML(我为此使用 AngularUI Bootstrap)
pane(heading="YouTube Videos", active="panes.videoActive")
div(ng-show="new_video.adding || !formData.videos.length")
h4 Add Video
p Paste the embed code from YouTube to add video:
textarea(ng-model="new_video.code")
br
a.btn.btn-primary(ng-click="addVideo()") <i class="icon-save"></i> Add Video
|
a.btn.btn-danger(ng-click="new_video.adding = false;new_video.code=''") <i class="icon-trash"></i> Cancel
div(ng-show="!new_video.adding && formData.videos.length")
.row-fluid
.span6
h4 YouTube Videos
.btn-group
button.btn.btn-small.btn-success(ng-click="new_video.adding = true") <i class="icon-plus"></i> New
button.btn.btn-small.btn-info(ng-show="listing_id>0", ng-click="saveVideoOrder()",ng-disabled="new_video.saving_sort") <i class="icon-save"></i> Save Order
i.icon-spinner.icon-spin(ng-show="new_video.saving_sort")
ul.unstyled.video-list(ui-sortable, ng-model="formData.videos")
li(ng-repeat="v in formData.videos",style="position:relative;padding-left:16px")
span(style="position:absolute;top:0;left:0;cursor:ns-resize") <i class="icon-resize-vertical"></i>
textarea(ng-model="v.code")
.btn-group
button.btn.btn-danger(ng-click="deleteVideo(v)", ng-disabled="new_video.deleting") <i class="icon-trash"></i> Delete
span(ng-show="new_video.deleting")
i.icon-spinner.icon-spin
button.btn.btn-info(ng-click="new_video.preview_code=v.code") <i class="icon-eye-open"></i> Preview
button.btn.btn-primary(ng-click="v = updateVideo(v)", ng-disabled="v.updating") <i class="icon-save"></i> Update
i.icon-spinner.icon-spin(ng-show="v.updating")
.span6(ng-show="new_video.preview_code")
h4 Preview
a.btn.btn-danger.btn-mini(ng-click="new_video.preview_code = false")
i.icon-eye-close
| Close
div(ng-bind-html-unsafe="new_video.preview_code")
仅供参考:大部分网站已经完成。Angular 仅在前端用于表单:注册、个人资料、提交汽车、消息系统和信用申请。管理员是一个完整的 Angular 应用程序,但您必须与客户一起找到一份工作才能看到 - 即使那样 - 我也不知道!=)