2013-04-14 30 views
0

這太瘋狂了。我正在爲此網站開發一個客戶端,用戶可以將嵌入代碼從YouTube上粘貼到屏幕上的文本區域。他們點擊「添加」,代碼被放入一個對象的屬性中,然後被轉到數組的末尾。然後您會看到您的「視頻列表」,並且有一個「新」按鈕可以添加更多視頻。只要單擊頁面上的「新建」按鈕添加第二個,IE就會凍結。我試過IE 9--它幾乎100%的時間 - 一旦它工作了,但我已經添加了其他的東西。
IE10似乎工作正常,但我可以發誓我之前有問題 - 但今晚,它確實很好。
更新:剛剛在Windows XP上測試IE8 - 沒有問題。AngularJS + IE + iframe粘貼在textarea =崩潰的瘋狂

經過很多調試,我相信我已經得出了一個瘋狂的結論,如果iframe是560像素或更寬,它會崩潰......如果您改變大小說550,沒有問題......所有這一切有問題的iframe是不實際的頁面上(你可以預覽它,但它沒有顯示,甚至在默認情況下注入的頁面。)

其他一些注意事項:
我試圖插入一個簡單的iframe,只是一個src屬性 - 沒有問題。
我嘗試插入一個HTML BUNCH - 沒有問題。
我試圖插入無效的HTML - 沒有問題。
我採用了YouTube的代碼,更改了網址 - 存在問題。
我試着再用手鍵入YouTube的代碼 - HAD問題的問題(希望一些奇怪的編碼或東西時,我嘗試這樣做)

這個網站正逐漸接近完成,所以有這方面的幫助將是非常感激!

爲了您的方便我設置一個站點,以實際看到這:

http://cars.thomporter.com

您需要先登錄:
用戶名:[email protected]
密碼:test1234

然後進入/提交或點擊導航欄中的「賣你的車」,然後點擊後面的頁面上的「快速列出」。

您可以立即進入「YouTube視頻」選項卡,並嘗試 - 你不必在整個標籤工作的方式...

下面是一些代碼(CoffeeScript的&玉 - 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引導這個)

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") 

FYI:大多數網站的完成。Angular僅用於表單上的前端:註冊,個人檔案,提交汽車,信用系統&信用申請。管理員是一個完整的角度應用程序,但你必須找到一份工作與客戶看到 - 即使如此 - 我不知道! =)

+0

爲什麼要求用戶添加Youtube嵌入代碼,而不是僅僅綁定到頁面上已嵌入代碼的視頻url?你認爲這可能會有所作爲嗎? – jpmorin

回答

0

我無法重現您的錯誤,但是我做了這個重擊程序,以便知道它是否在您的計算機上也一樣。

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

在本演示中,你必須輸入YouTube內嵌視頻網址是這樣的(而不是整個嵌入式代碼):http://www.youtube.com/embed/video_id(爲了簡化用戶的工作,你可以解析常規YouTube網址獲取視頻ID並將其更改爲此表單)。

並單擊添加將其推入列表中。然後,您可以單擊Watch在iframe src中設置所選項目的URL。

+0

因此,在我的網站上的IE9,你沒有問題?我已經在努力將它改爲您原來的評論中的建議......我只是從他們輸入的URL中提取視頻ID並將其保存在數據庫中,而不是保存,更容易爲用戶...這是一個很好的想法,我不知道爲什麼我甚至會用嵌入代碼開始......但是,如果事實證明它只在我的計算機上被破解 - 哇。吮吸我的電腦! –

+0

我會再試一次,以防萬一! – jpmorin

+0

我確認在添加更多視頻時出現了問題。我在控制檯中看到很多次(〜100 +)這個消息:SCRIPT5009:«__flash__removeCallback»是未定義的 AG7ihOkT2YQ,第1行Caracter 1.我沒有在Chrome中看到這個。 – jpmorin