###前提・実現したいこと
monacaで作成したアプリ内で、iframeからアメブロのサイトを表示したい。
###発生している問題・エラーメッセージ
Androidは正常に動作しますが、iPhoneの場合、動画広告のようなものが前面に出てきて、操作ができなくなります。
広告が終わった後も無限リピートされ、コンテンツを表示させることができません。
他のサイトはiPhoneでも正常に表示されることを確認しています。
###該当のソースコード
html
1<ons-page> 2 <ons-toolbar class="force-center"> 3 <div class="left" ng-include="'app/top/header_left.html'"> 4 </div> 5 <div class="center header-logo" ng-include="'app/top/header_center.html'"> 6 </div> 7 <div class="right" ng-include="'app/top/header_right.html'"> 8 </div> 9 </ons-toolbar> 10 <div id="container" ng-controller="LinkController"> 11 <ons-progress-bar indeterminate ng-show='progressShow'></ons-progress-bar> 12 <iframe src="{{link}}" iframe-onload="stopProgress();"></iframe> 13 </div> 14</ons-page>
css
1html, body { 2 height:100%; 3} 4#container { 5 height: 100%; 6} 7iframe { 8 width: 100%; 9 height: 100%; 10 margin: 0; 11 padding: 0; 12 border: none; 13}
javascript
1 2myApp.controller('LinkController', ['$scope', '$state', '$stateParams', '$sce', function($scope, $state, $stateParams, $sce) { 3 console.log("LINK_MAP: "+ LINK_MAP[$stateParams.link]); 4 $scope.link = $sce.trustAsResourceUrl(LINK_MAP[$stateParams.link]); 5 $scope.stopProgress = function() { 6 $scope.progressShow = false; 7 $scope.$apply(); 8 } 9 }]); 10 11myApp.directive('iframeOnload', [function(){ 12 return { 13 scope: { 14 callBack: '&iframeOnload' 15 }, 16 link: function(scope, element, attrs){ 17 element.on('load', function(){ 18 console.log("iframeOnload"); 19 return scope.callBack(); 20 }) 21 } 22 } 23 }]); 24
###補足情報
angularjs: 1.6.5
onsenui: 2.4.2
angular-ui-router: 1.0.5
お手数をおかけして申し訳ありませんが、ご教授のほど、よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/24 13:27