Few days ago, I visited a site, and for no reason I tried to view its source code. And surprisingly, it doesn't contain regular HTML tags such as h1, h2, p, etc.
it only contains code like this :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
if (window.PerformanceObserver) {
var observer = new PerformanceObserver(function(list) {
const entries = list.getEntries();
for (var i=0; i<entries.length; i++) {
var entry = entries[i];
// `name` will be either 'first-paint' or 'first-contentful-paint'.
var metricName = entry.name;
var time = Math.round(entry.startTime + entry.duration);
ga('send', {
hitType: 'timing',
timingCategory: 'Performance Metrics',
timingVar: metricName,
timingValue: time,
});
}
});
observer.observe({entryTypes: ['paint']});
}
</script>
<!-- Open search -->
<link type="application/opensearchdescription+xml" rel="search"
href="./assets/opensearch-id.xml"/>
<script>dataLayer = [];</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WJZQSJF');</script>
<!-- End Google Tag Manager -->
<link href="***/assets/bundle.f4eb17af99f6bcda6c58794466a0abd3.css" rel="stylesheet"></head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WJZQSJF"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div id="main"></div>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
</script>
<!-- DO NOT MODIFY -->
<!-- End Facebook Pixel Code -->
<!-- Criteo One Tag Code -->
<script type="text/javascript" src="//*******" async="true"></script>
<script>window.criteo_q = window.criteo_q || [];</script>
<!-- End Criteo Code -->
<script>!function(e){function c(a){if(b[a])return b[a].exports;var d=b[a]={i:a,l:!1,exports:{}};return e[a].call(d.exports,d,d.exports,c),d.l=!0,d.exports}var a=window.webpackJsonp;window.webpackJsonp=function(b,f,n){for(var r,t,o,i=0,u=[];i<b.length;i++)t=b[i],d[t]&&u.push(d[t][0]),d[t]=0;for(r in f)Object.prototype.hasOwnProperty.call(f,r)&&(e[r]=f[r]);for(a&&a(b,f,n);u.length;)u.shift()();if(n)for(i=0;i<n.length;i++)o=c(c.s=n[i]);return o};var b={},d={74:0};c.e=function(e){function a(){r.onerror=r.onload=null,clearTimeout(t);var c=d[e];0!==c&&(c&&c[1](new Error("Loading chunk "+e+" failed.")),d[e]=void 0)}var b=d[e];if(0===b)return new Promise(function(e){e()});if(b)return b[2];var f=new Promise(function(c,a){b=d[e]=[c,a]});b[2]=f;var n=document.getElementsByTagName("head")[0],r=document.createElement("script");r.type="text/javascript",r.charset="utf-8",r.async=!0,r.timeout=12e4,c.nc&&r.setAttribute("nonce",c.nc),r.src=c.p+""+({61:"vendor",62:"bundle",63:"icons",64:"short_url"}[e]||e)+".bundle."+{0:"c38a1529c3b99c325cbb",1:"36418a346d47b7489609",2:"ef74eff3789cd571abc8",3:"40b845bf76f300f55de4",4:"8a6a439aa451d3d927b0",5:"72986b428e8cbd866607",6:"c6c9571f8e2fe5d212bb",7:"aae34ad175b103ef7e4e",8:"242c59a9d553de716c60",9:"ef6bbc1570fb8834ab36",10:"4bbc0a828f9c224773d1",11:"ddb3f50d8864e9408fc1",12:"6c1497f53303248323d7",13:"afeda231b24bbc8194de",14:"a87b72a437d706639baf",15:"09604bb7d99977b19574",16:"2a88b519fe8a5231bed8",17:"8752912c6b561ea445e5",18:"1bc4d82776cf99767789",19:"a2333c0fb5928e5c8294",20:"5b3a12ea7ea8144d0b40",21:"84073184bb3f2047b2a7",22:"20b45cf24e9ba43bfeb9",23:"cd0ea9678da108d1f4ce",24:"cd3c35192890404fa9f8",25:"5eb5420abef187dc2df6",26:"18f747b4b8c098ff19f7",27:"669314a53c5cfe3c73d6",28:"ebcb097c69b716623654",29:"ac9eccdcdb242cc2aef8",30:"5e109d633d36dcbba47f",31:"5a7027b9dfa01f78bf70",32:"61e7dceb5b3a30078d83",33:"4fee29baa1d2816fdae7",34:"cc8761150451212c4a22",35:"b17ad377b0cb1ef37461",36:"66899702ab02bf7a6339",37:"bf88a5c916c22b7dd322",38:"0f8294f2a9a2e2e1ffeb",39:"dc558711f648a8ae4fc6",40:"aa5362b270c5e5c12cb8",41:"53574e3109dc0721b45b",42:"e7d39f00425207d8b5b0",43:"b1cdc408800853db7b1a",44:"90e7fdfc599c75ed6c00",45:"33db36c7330b10227972",46:"830b163b775b656e3a92",47:"03bfb3bbdd79ee0e0442",48:"e0548b8051ef72fb0e4f",49:"a14357c795d7bc1913cd",50:"ed0bec3efe20b2dc2da1",51:"76f7f508111c9d32ea1e",52:"ce6f96656a3b08a5f978",53:"dbce6a5f7c10fc5bda8b",54:"00e18ead99250bf63f01",55:"04d3bb1b65d42a9fdaf4",56:"1a12a992adc0cc13f856",57:"5fe4d3c577315f8f99a2",58:"bcd10412dcbab2259da4",59:"c8db0c00ea4034701abc",60:"d33e9ca4f6d41e01d92c",61:"8ee65c855117c2ea0d78",62:"7d31cc04d88c6681ce75",63:"d2dcedabc8faa5a71473",64:"e66827895350ae2fac63",65:"230b7a8a1670edc8e52c",66:"33b35d4cbdffc7271758",67:"6a55b5d11720b6d975ad",68:"7d28f6e0272beec18917",69:"91c610b55fa27ae0d91c",70:"4c240b9a04ec67a27235",71:"54531e628f75037462bd",72:"f6a6e9ff0ab728eabca1",73:"3d7f47216be8efeca29b"}[e]+".js";var t=setTimeout(a,12e4);return r.onerror=r.onload=a,n.appendChild(r),f},c.m=e,c.c=b,c.d=function(e,a,b){c.o(e,a)||Object.defineProperty(e,a,{configurable:!1,enumerable:!0,get:b})},c.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(a,"a",a),a},c.o=function(e,c){return Object.prototype.hasOwnProperty.call(e,c)},c.p="https://cdngarenanow-a.akamaihd.net/shopee/shopee-pcmall-live-id/assets/",c.oe=function(e){throw e}}([]);
</script>
<script type="text/javascript" src="https://***/vendor.8ee65c855117c2ea0d78.js"></script><script type="text/javascript" src="https://***/assets/icons.d2dcedabc8faa5a71473.js"></script><script type="text/javascript" src="https://***/assets/bundle.7d31cc04d88c6681ce75.js"></script><script type="text/javascript" src="https://***/assets/short_url.e66827895350ae2fac63.js"></script></body>
</html>
what programming language / technique is this? it shows all the content on my browser, but the html tags remains invisible. any idea what it is?
That's some straight up Javascript you're seeing there, and the code running will be generating all the necessary tags client side (hence why viewing the source doesn't show them).
Try right-clicking on an element and using "Inspect". That should open the browser's dev tools and show the HTML code the Javascript is generating.
I used a Loopback/Polymer starter kit I found as a starting base for an application, but it does not seem to work on browsers other than Chrome (i.e. Firefox/IE/Safari). The demo for the starter kit code works in other browsers, so I know it must be possible, but I am having trouble converting my code into the structure that works. I am wondering if anyone would have any insight as to why it does not work with the structure I have in place from my index.html. It doesn't read my <application-polymer> element or native HTML elements (if I add them in) on the other browsers.
I have the webcomponents.js file imported in, and my elements are all inside client/element directory and linked to client/elements/elements.html. It works perfectly in Chrome, but no other browser. Please help!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Application">
<title>Site</title>
<link rel="shortcut icon" sizes="32x32" href="/images/site-thumbnail.png">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!-- Place favicon.ico in the `app/` directory -->
<!-- Chrome for Android theme color -->
<meta name="theme-color" content="#fff">
<!-- Web Application Manifest -->
<link rel="manifest" href="manifest.json">
<!-- Tile color for Win8 -->
<meta name="msapplication-TileColor" content="#3372DF">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="PSK">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Polymer Starter Kit">
<!-- Tile icon for Win8 (144x144) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild-->
<!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"</script>
<!-- endbuild -->
<!-- build:js scripts/bundle.js -->
<script src="scripts/bundle.js"></script>
<!-- endbuild -->
<!-- Because this project uses vulcanize this should be your only html import
in this file. All other imports should go in elements.html -->
<link rel="import" href="elements/elements.html">
<!-- <link rel="import" href="elements/application-polymer.html"> -->
<!-- For shared styles, shared-styles.html import in elements.html -->
<style is="custom-style" include="shared-styles"></style>
<style>
body {
margin: 0;
font-family: 'Open Sans', sans-serif;
line-height: 1.5;
min-height: 100vh;
background-color: #eee;
}
</style>
</head>
<body unresolved>
<!-- build:remove -->
<span id="browser-sync-binding"></span>
<!-- endbuild -->
<template is="dom-bind" id="app">
<!-- <h1>HELLO</h1> -->
<application-polymer></application-polymer>
</template>
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<!-- endbuild-->
</body>
</html>
The link to the full starterkit that this application is based off of is here:
https://github.com/klarkc/polymer-loopback-starter-kit
The index.html structure is different (trying to import custom web components from elements/elements.html instead of creating them all inside the index.html which is unrealistic for a sophisticated app), which is why I am having issues.
I'm not sure what you have there, but it doesn't appear to be the latest starter kit, which I believe now follows the PRPL pattern and loads the stuff much later in the startup cycle.
If you look at it, it tries to dynamically decide to load the web components polyfill dependant whether the browser supports web components or not.
<script>
// Setup Polymer options
window.Polymer = {
dom: 'shadow',
lazyRegister: true
};
// Load webcomponentsjs polyfill if browser does not support native Web Components
(function() {
'use strict';
var onload = function() {
// For native Imports, manually fire WebComponentsReady so user code
// can use the same code path for native and polyfill'd imports.
if (!window.HTMLImports) {
document.dispatchEvent(
new CustomEvent('WebComponentsReady', {bubbles: true})
);
}
};
var webComponentsSupported = (
'registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')
);
if (!webComponentsSupported) {
var script = document.createElement('script');
script.async = true;
script.src = 'bower_components/webcomponentsjs/webcomponents-lite.min.js';
script.onload = onload;
document.head.appendChild(script);
} else {
onload();
}
})();
// Load pre-caching Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('service-worker.js');
});
}
</script>
I suspect you are not correctly initializing the polyfills for non chrome browsers
I recommend actually using the polymer-cli from creating a framework as described here
https://www.polymer-project.org/1.0/toolbox/
I'm stuck on something very simple and can't seem to figure out what I'm doing wrong. I've created a blank project in ionic and would like to set a default home screen as the first view loaded. I'm staring at a blank screen when I run this in the browser.
My code is as follows:
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
var app = angular.module('starter', ['ionic'])
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/')
$stateProvider.state('home_screen', {
url:'/',
templateUrl: 'home_screen.html'
})
})
home_screen.html
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Home Screen</h1>
</ion-header-bar>
<ion-content>
<div class="spacer" style="height: 100px;"></div>
<div class="col col-33 col-offset-33">
<button class="button button-block button-balanced">Play</button>
</div>
<div class="spacer" style="height: 100px;"></div>
<div class="col col-33 col-offset-33">
<a class="button button-outline button-block button-balanced" href="#/app/about">About</a>
</div>
</ion-content>
</ion-pane>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
home_screen.html will work just fine when I include it in the index.html but does not work when I try to set it as the default view. I tried following the tutorial from here:
http://learn.ionicframework.com/formulas/navigation-and-routing-part-1/
Any help would be appreciated.
Actually you have to uncomment the ion-nav-view in your index.html file. You don't have to give that a name even. Try to add this in your index.html file:
...
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
...
To get started with ionic I also recommend to look at other starter projects like tabs or sidemenu which are described here.
var myApp = angular.module('myApp',['ui.router'])
myApp.config(function($stateProvider, $urlRouterProvider){
// $urlRouterProvider.otherwise('/home');
$stateprovider
//Home states and nested views
.state('home',{
url: '/home',
templateUrl: 'index.html'
})
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Modern Business - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/modern-business.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body ng-app="myApp">
<div ng-include='"templates/header.html"'></div>
<div ui-view></div>
<div ng-include='"templates/footer.html"'></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="js/app.js"></script>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Contact Form JavaScript -->
<!-- Do not edit these files! In order to set the email address and subject line for the contact form go to the bin/contact_me.php file. -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
</body>
</html>
Here is my HTML and app.js I am working with UIRouter. I am getting an error of injector module, but unable to figure it out. I am new to AngularJS, so please help me out. And yes, my ng-include too is not working. No results are displayed when I run my index.html file.
There is a working plunker
The casing is essential. It is $stateProvider not $stateprovider. This must be the state def:
var myApp = angular.module('myApp', ['ui.router'])
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
//$stateprovider
$stateProvider
//Home states and nested views
.state('home', {
url: '/home',
//templateUrl: 'index.html'
template: "<h1>hello from home</h1>",
})
});
Check it here
NOTE: when you develop... do NOT use min versions. Only full can give you nice and easy to understand exceptions...
$stateprovider should be $stateProvider
I have included a php file using javascript function getApi() it working properly in my intel-xdk emulator but when i load it in to my android device it will not working properly
so pleas tell me what's wrong with my code , and my device is also connected with internet so it may able to retrive data from the server ,but it can't
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="app_framework/css/af.ui.min.css">
<link rel="stylesheet" type="text/css" href="app_framework/css/icons.min.css">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
<title>Your New Application</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
</style>
<script src="intelxdk.js">
</script>
<script type="text/javascript">
/* This code is used to run as soon as Intel activates */
var onDeviceReady=function(){
//hide splash screen
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
function getApi() {
alert("Yes");
$.ajax({
type: "GET",
url: "http://exam.coreducation.in/api.php",
success: function(data){
var total = "";
var record = JSON.parse( data );
for(i=0; i<record.length; i++){
total += ("Contact: "+record[i]['contact']+", Name: "+record[i]['name']+", City: "+record[i]['city'] + "<br/>");
}
$('#ddata').html("<h4 style='text-align:center'>"+total+"</h4>")
}
});
}
</script>
<script type="application/javascript" src="app_framework/appframework.min.js"></script>
<script type="application/javascript" src="app_framework/appframework.ui.min.js"></script>
</head>
<body id="afui">
<!-- content goes here-->
<div class="uwrap" id="content">
<div class="upage panel" id="page0" data-header="none" data-footer="none">
<div class="upage-outer">
<div class="upage-content">
<div class="grid grid-pad urow uib_row_1 row-height-1" data-uib="layout/row">
<div class="col uib_col_1 col-0_12-12" data-uib="layout/col">
<div class="widget-container content-area vertical-col">
<a class="button widget uib_w_1 d-margins icon graph" data-uib="app_framework/button" onclick="return getApi();">GetApiData</a><span class="uib_shim">
</span>
<div id="ddata">DAta Will Show Here</div>
</div>
</div>
<span class="uib_shim"></span>
</div>
</div>
<!-- /upage-content -->
</div>
<!-- /upage-outer -->
</div>
</div>
<!-- /uwrap -->
</body>
</html>`enter code here`
The api is blocked due to Cross domain access, same reason why your code will not work in any browser. But there is a way to make it work in Intel XDK apps, just add <script src="xhr.js"></script> after your intelxdk.js script inclusion. It will then work on device.
More info about AJAX and XDK here: http://software.intel.com/en-us/html5/articles/how-to-access-JSON-data-in-HTML5-apps
I resolved similar problem using domain whitelistening.
In Intel XDK it can be done by following next steps:
Open Projects Tab
Expand Build Settings
Enter "*" (without quotes) to Domain List field.