Question

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

经过大量调试后，我相信我真的得出了一个疯狂的结论：如果iframe是560像素或更宽，它会崩溃...如果你改变大小说550，没问题......这一切都是有问题的iframe实际上并不在页面上（您可以预览它，但默认情况下它不显示甚至注入页面。）

其他一些说明：
我尝试插入一个简单的iframe，只是一个src属性 - 没有问题我尝试插入一个HTML的BUNCH - 没有问题我尝试插入INVALID html - 没有问题我使用了YouTube的代码，更改了网址 - 问题是问题我尝试手动重新输入YouTube的代码 - HAD问题（希望有一些奇怪的编码或者我试过的时候。）

这个网站已接近完成，所以对此的任何帮助都将非常感谢！

为了您的方便，我设置了一个网站来实际看到这个：

http://cars.thomporter.com

您需要先登录：
用户名：test@testers.com
密码：test1234

然后进入/提交或点击导航中的“卖你的车”，然后点击后续页面上的“快速列出”。

您可以立即转到“YouTube视频”标签，然后尝试一下 - 您无需按标签浏览...

以下是一些代码（CoffeeScript＆amp; 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仅用于表单的前端：注册，配置文件，提交汽车，消息系统和信用申请。管理员是一个完整的角度应用程序，但你必须得到客户端的工作才能看到 - 即便如此 - 我不知道！ =）

Answer 1

我无法重现你的错误，但是为了知道它是否在你的计算机上做同样的事情我做了这个plunker。

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

在此演示中，您必须输入这样的youtube embeded视频网址（而不是整个嵌入代码）：http://www.youtube.com/embed/video_id（为了方便用户工作，您可以解析常规的YouTube网址以获取视频ID并将其更改为此形式。）

单击“添加”将其推送到列表中。然后单击watch以在iframe src中设置所选项目URL。

AngularJS + IE + iframe粘贴在textarea =崩溃疯狂

1 个答案: