首页 > 解决方案 > Admob 广告未在 Jquery 移动应用中显示

问题描述

我正在尝试在使用 Cordova 使用 jquery mobile 构建的应用程序中显示广告。我正在使用 Cordova-Admob-plus 插件来展示广告。当我使用温泉 UI 构建应用程序时,该插件工作正常。但是当我使用 Jquery Mobile 时,广告不会显示。

当我使用 Jquery Mobile 框架构建应用程序时,我不知道为什么广告不起作用。我认为这与在 jquery Mobile 中不起作用的 javascript 函数有关。但我无法找出实际问题。

index.html 文件

<!doctype html>
<html>
<head>

<meta charset="UTF-8">
<title>App</title>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1"> 
<meta name="robots" content="noindex">
<link rel="stylesheet" href="css/cont.css" />

<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.theme-1.4.5.min.css">
<link rel="stylesheet" href="css/jquery.mobile.icons-1.4.5.min.css">
<link rel="stylesheet" href="css/onsenui.css" />
<link rel="stylesheet" href="css/onsen-css-components.min.css" />
<script src="js/onsenui.min.js"></script>
<body>
    

    <div data-role="page" id="homeIndex" data-theme="a">
        <div data-role="header" data-position="fixed" data-theme="b">
            <h1>SCHOLARSHIPS PAKISTAN</h1>
        </div>
<div class="app">

    <div id="deviceready" class="blink">
    </div>
</div>
        <div data-role="main" data-role="content" class="ui-content" data-theme="a">
<div class="app">

    <div id="deviceready" class="blink">
    </div>
</div>
            <a href="all.html" data-role="button" target="_self">All Scholarships</a>
            <a href="merit.html" data-role="button" target="_self">Merit Based Scholarships</a>
            <a href="need.html" data-role="button" target="_self">Need Based Scholarships</a>
    <a href="hecl.html" data-role="button" target="_self">HEC Local Scholarships</a>
<a href="hecf.html" data-role="button" target="_self">HEC Foreign Scholarships</a>
<a href="peef.html" data-role="button" target="_self">PEEF Scholarships</a>
<a href="uni.html" data-role="button" target="_self">University Scholarships</a>
<a href="ugrad.html" data-role="button" target="_self">Undergraduate Scholarships</a>
<a href="pgrad.html" data-role="button" target="_self">Post Gardauate Scholarships</a>
<a href="it.html" data-role="button" target="_self">Engineering and IT Scholarships</a>
<a href="med.html" data-role="button" target="_self">Medical Scholarships</a>
<a href="biz.html" data-role="button" target="_self">Business and Management Scholarships</a>
    
                
        </div>
            
    </div> 

    <div data-role="page" id="dialog">
        <div data-role="header">
            <h1 id="title">Error</h1>
        </div>    
        <div data-role="content" id="content">
        </div>    
    </div>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/pinch-zoom.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/cordova.js"></script>
<script type="text/javascript" src="js/script.js"></script>

</body>
</html>

index.js 文件来展示广告

'use strict'

const app = {
  initialize() {
    document.addEventListener(
      'deviceready',
      this.onDeviceReady.bind(this),
      false,
    )
  },

  onDeviceReady() {
    this.receivedEvent('deviceready')

    this.showAds()
    this.checkIsLoaded()
    this.showAdsOld()
  },

  checkIsLoaded() {
    return admob.interstitial.isLoaded().then(result => {
      console.log(result)
      return result
    })
  },

  showAds() {
    
    const banner = new admob.BannerAd({
      adUnitId: 'ca-app-pub-5517499679401400/9842406242',
    })
    banner.show({ position: 'top' })
  },

  showAdsOld() {
   
    admob.interstitial
      .load({ id: 'ca-app-pub-5517499679401400/3866534140' })
      .then(() => admob.interstitial.show())
      .catch(console.log)
    
  },

  receivedEvent(id) {
    const parentElement = document.getElementById(id)
   

    console.log(`Received Event: ${id}`)
  },
}

app.initialize()

标签: androidjquerycordovaadmobphonegap

解决方案


我认为您应该尝试使用 cordova Admob-pro 插件。它使用起来简单快捷。


推荐阅读