2016-06-13 7 views
3

私は単純な角型のアプリケーションを書いています。ブラウザのようなものにしたいと思います。入力ボックスのユーザーはurlを入力できます。iframeにURLの内容を表示できます。ユーザーは戻ることができます。iframe以外の履歴を操作する方法

iframeで$ sceからng-srcを使用して、ウェブサイトのユーザー入力を受け入れます。しかし、CORSの問題のために履歴の機能を実装することはできません。

これを達成する可能性はありますか?おかげリンクとして従うことだけで安全ではないURLについて

JS

$scope.testurl = $sce.trustAsResourceUrl("http://www.baidu.com"); 
$scope.backPage = function() { 
    var ifr = document.getElementById("myIframe"); 
    ifr.contentWindow.history.back(); 
} 

HTML

<ion-view view-title="Account"> 
    <ion-content> 
    <div ng-click="backPage()">BACK</div> 
    <iframe id="myIframe" style="height:500px;width:100vw" ng-src="{{testurl}}"></iframe> 
    </ion-content> 
</ion-view> 

エラー

Error: Blocked a frame with origin "http://localhost:8101" from accessing a cross-origin frame. 
    at Error (native) 
    at Scope.$scope.backPage (http://localhost:8101/js/controllers.js:32:24) 
    at fn (eval at compile (http://localhost:8101/lib/ionic/js/ionic.bundle.js:27638:15), <anonymous>:4:215) 
    at http://localhost:8101/lib/ionic/js/ionic.bundle.js:65427:9 
    at Scope.$eval (http://localhost:8101/lib/ionic/js/ionic.bundle.js:30395:28) 
    at Scope.$apply (http://localhost:8101/lib/ionic/js/ionic.bundle.js:30495:25) 
    at HTMLDivElement.<anonymous> (http://localhost:8101/lib/ionic/js/ionic.bundle.js:65426:13) 
    at defaultHandlerWrapper (http://localhost:8101/lib/ionic/js/ionic.bundle.js:16787:11) 
    at HTMLDivElement.eventHandler (http://localhost:8101/lib/ionic/js/ionic.bundle.js:16775:9) 
    at triggerMouseEvent (http://localhost:8101/lib/ionic/js/ionic.bundle.js:2953:7) 
+0

ことが可能であり、ここでの議論と、それに関連するいくつかのトラブル:http://stackoverflow.com/questions/3254985/back-and-forward-buttonsイン・アン・イン・フレーム –

答えて

1

ますが、その内容もに安全ですあなたのアプリケーションに含める。例には、IMG以外のタグ(例:IFRAME、OBJECTなど)のng-include、src/ngSrcバインディングが含まれます。

$ sce.URLよりもURLについて強い記述があることに注意してください。 $ sce.RESOURCE_URLに対して信頼できる値を要求するには、$ sce.URLに対して信頼できる値が必要な場所であればどこでも使用できます。

Doc

app.config(function($sceDelegateProvider) { 
$sceDelegateProvider.resourceUrlWhitelist([ 
    // Allow same origin resource loads. 
    'self', 
    // Allow loading from our assets domain. Notice the difference between * and **. 
    'http://www.baidu.com' 
    ]); 

    // The blacklist overrides the whitelist so the open redirect here is blocked. 
    $sceDelegateProvider.resourceUrlBlacklist([ 
    'http://myapp.example.com/clickThru**' 
    ]); 
}); 
2

window.historyオブジェクトを使用してください。

// For the current window 
window.history.back();  
window.history.forward(); 

// For an iframe's window 
iframe.contentWindow.history.back(); 
iframe.contentWindow.history.forward(); 

または

iframe.contentWindow.history.go(-1); // back 
iframe.contentWindow.history.go(1); // forward 

https://developer.mozilla.org/en/dom/window.history

関連する問題