如何在 iframe 之外操作历史记录
Posted
技术标签:
【中文标题】如何在 iframe 之外操作历史记录【英文标题】:How to manipulate history outside of an iframe 【发布时间】:2016-10-14 01:24:14 【问题描述】:我正在编写一个简单的 Angular 应用程序,我想制作一个类似浏览器的东西:用户可以输入 url 的输入框,显示 url 内容的 iframe,用户可以按下返回的按钮。
我在 iframe 中使用 $sce 到 ng-src 来接受任何网站用户输入。但由于 CORS 问题无法实现历史回溯功能。
有没有可能实现它?谢谢
JS
$scope.testurl = $sce.trustAsResourceUrl("http://www.baidu.com");
$scope.backPage = function ()
var ifr = document.getElementById("myIframe");
ifr.contentWindow.history.back();
<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)
【问题讨论】:
有可能,在这里讨论和一些相关的麻烦:***.com/questions/3254985/… 【参考方案1】:使用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
【讨论】:
【参考方案2】:对于不仅可以安全地作为链接跟踪的 URL,而且其内容也可以安全地包含在您的应用程序中。示例包括 ng-include、src / ngSrc 对 IMG 以外的标签(例如 IFRAME、OBJECT 等)的绑定
请注意,与 $sce.URL 相比,$sce.RESOURCE_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**'
]);
);
【讨论】:
以上是关于如何在 iframe 之外操作历史记录的主要内容,如果未能解决你的问题,请参考以下文章
如何重写历史记录,以便除我已经移动的文件之外的所有文件都在子目录中?