0

这太疯狂了。我正在这个网站上为一个客户端开发,用户可以将嵌入代码从 youtube 粘贴到屏幕上的文本区域。他们单击“添加”,代码被放入对象的属性中,该属性又被推到数组的末尾。然后你会看到你的视频“列表”,还有一个“新”按钮可以添加更多。一旦您单击页面上的“新建”按钮添加第二个,IE 就会冻结。我已经尝试过 IE 9——它几乎 100% 的时间都在运行——一旦它起作用了,但我先添加了其他东西。
IE10 似乎工作正常,但我可以发誓我之前在那里遇到过这个问题 - 但今晚,它看起来确实很好。
更新:刚刚在 Windows XP 上测试了 IE8 - 没有问题。

经过多次调试,我相信我实际上得出了一个疯狂的结论,即如果 iframe 是 560 像素或更宽,它会崩溃......如果你将大小更改为 550,没问题......所有这一切,而 iframe 有问题实际上不在页面上(您可以预览它,但默认情况下它不会显示甚至注入到页面中。)

其他一些注意事项:
我尝试插入一个简单的 iframe,只是一个 src 属性 - 没有问题。
我尝试插入一堆 html - 没问题。
我尝试插入无效的 html - 没有问题。
我拿了 YouTube 的代码,更改了 URL - 有问题。
我尝试手动重新输入 YouTube 的代码 - 遇到了问题(当我尝试这个时希望有一些奇怪的编码或其他东西。)

该网站即将完成,因此非常感谢您提供任何帮助!

为了您的方便,我设置了一个站点来实际查看:

http://cars.thomporter.com

您需要先登录:
用户名: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 应用程序,但您必须与客户一起找到一份工作才能看到 - 即使那样 - 我也不知道!=)

4

1 回答 1

0

我无法重现您的错误,但我做了这个 plunker 是为了知道它在您的计算机上是否也一样。

链接:http ://plnkr.co/edit/LebJuOtlp6hOhzahQrIw?p=preview

在此演示中,您必须输入这样的 youtube 嵌入视频 url(而不是整个嵌入代码):http://www.youtube.com/embed/video_id(为了方便用户工作,您可以解析常规 youtube url获取视频 ID 并将其更改为此表单)。

并单击添加以将其推送到列表中。然后你点击 watch 在 iframe src 中设置选中的 item url。

于 2013-04-14T06:21:45.713 回答