2015-06-14 107 views
3

我正在使用離子在其中創建一個應用程序,使用iframe顯示一個URL。 這是HTML代碼:如何刷新iframe網址?

<iframe id="myFrame" width="100%" height={{iframeHeight}}> 

這是角JS:

$scope.iframeHeight = window.innerHeight; 
         document.getElementById("myFrame").src = value['url']; 

一切工作,但是當我做從後端的網站上更改並刷新應用新的更改沒有出現在應用程序中。

回答

7

您在代碼中所做的事情並不是一種有效的方式。您正在使用不會運行摘要循環的本機方法操作DOM,因此您需要通過執行$scope.$apply()來手動運行它。這將解決你的問題,但通常你不應該從控制器做DOM操作,這被認爲是不良做法。相反,我建議你使用角度雙向綁定功能。在範圍作用域變量中分配url並在iframe標記上添加該標記,使用ng-src="{{url}}",這樣src URL將被角度更新並且url得到更新iframe將從其中的src URL中加載內容。

HTML

<iframe id="myFrame" width="100%" ng-src="{{url}}" height={{iframeHeight}}> 

代碼

$scope.url = "http://example.com" 

當您在控制器更改範圍變量iframe的的src也將被改變,iframe將刷新內容。

更新

爲了解決您需要爲當前日期時間追加到你的網址,將每次做一個新的URL緩存的問題,它不會被瀏覽器緩存。類似$scope.url = "http://example.com?dummyVar="+ (new Date()).getTime()這樣使用它不會損害您當前的行爲,只需要將當前時間值附加到dummyVar,這將始終是唯一的。

$scope.url = "http://example.com?dummyVar="+ (new Date()).getTime() 
+0

非常感謝哥哥 –

+0

HI弟兄它不工作,即沒有更新的變化。有沒有什麼辦法可以清除緩存 –

+0

@MunavvarFairoos看看更新後的答案...這將避免緩存與數據的url通過在查詢參數中創建唯一的url只需要appendend時間 –

1

由於@pankajparkar在他的回答中建議,我建議你使用角度2路數據綁定。

除此之外,您需要使用$sce.trustAsResourceUrl函數來封裝url以使iframe正常工作。

<iframe id="myFrame" width="100%" ng-src="{{url}}" height={{iframeHeight}}> 

而且

$scope.url = $sce.trustAsResourceUrl("http://example.com"); 
+0

非常感謝兄弟 –

+0

你好兄弟它不工作,即不更新的變化。有沒有什麼辦法可以清除緩存 –

+0

你可以用你的代碼創建一個plunker或者小提琴嗎? –

1

刷新並沒有爲我與時間戳工作在潘卡Parkar的答案,所以我解決它在一個有點哈克的方式,它只是切換NG-if元素關閉並再次,並強制iframe加載。

模板:

<iframe ng-if="!vm.isRefreshing"></iframe> 

控制器:

refreshIframe() { 
    this.isRefreshing = true; 

    $timeout(() => { 
     this.isRefreshing = false; 
    }, 50); 
}