修改iframe历史浏览加一

Posted 2023-04-30

参考技术A 修改iframe历史浏览加一，根据相关资料显示，动态切换iframe的src会导致增加一条iframe的历史浏览记录，无论vue还是react都是基于window.history做路由跳转，所以回退一步就是回退iframe的历史浏览记录。

如何在 iframe 之外操作历史记录

【中文标题】如何在 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();

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)

【问题讨论】：

有可能，在这里讨论和一些相关的麻烦：***.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**'
  ]);
);