Question

我正在创建一个使用ionic的应用程序，我在其中使用iframe显示URL。这是HTML代码：

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

这是角度js：

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

一切正常，但是当我从后端对网站进行更改并刷新应用时，新的更改不会显示在应用中。

Answer 1

您在代码中所做的事情并不是一种有效的方法。您正在使用不会运行摘要周期的本机方法操作DOM，您需要通过执行$scope.$apply()手动运行它。这将解决您的问题，但通常您不应该从控制器执行DOM操作，这被视为BAD练习。相反，我建议你使用角度双向绑定功能。在范围范围变量中分配网址，并使用ng-src="{{url}}"在iframe标记上添加该网址，以便src网址将按角度更新，并且网址更新iframe将从src加载内容其中的网址。

<强> HTML

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

<强>代码

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

当您更改控制器中的范围变量时，iframe的src也会发生变化，iframe会重新加载内容。

<强>更新

要解决缓存问题，您需要将当前日期时间附加到您的网址，每次创建一个新网址时，它都不会被浏览器缓存。使用此类似$scope.url = "http://example.com?dummyVar="+ (new Date()).getTime()之类的东西永远不会损害您当前的行为，只需要为dummyVar添加当前时间值，该值始终是唯一的。

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

Answer 2

在Pankaj Parkar的答案中，刷新对我的时间戳没有用，所以我以一种黑客的方式解决了它，只是将ng-if元素关闭再打开，并强制加载iframe。

模板：

[HttpPost]
public ActionResult Create(TripPicture model, HttpPostedFileBase ImageData)
{
    if (ImageData != null)
    {
        model.TripId = 1;
        model.Image = this.ConvertToBytes(ImageData);
    }

    _unitOfWork.TripsRepository.Add(model);
    _unitOfWork.Commit();

    return View(model);
}

控制器：

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

Answer 3

正如@pankajparkar在他的回答中建议的那样，我建议你使用有角度的双向数据绑定。

除此之外，您还需要使用$sce.trustAsResourceUrl功能打包网址，以便iframe正常工作。

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

和

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

如何刷新iframe网址？

3 个答案: