I created a small js script which allows me to get pop-up from console message when something will be printed there:
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="utf-8">
<title>Frontend</title>
<base href="/">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function() {
var exLog = console.log;
console.log = function(msg) {
exLog.apply(this, arguments);
alert(msg);
}
})()
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
</html>
But function is only executed one time, how to make this every time when something in console occurs?
Related
I have my SVG embetted in HTML
<object onclick='showStreet()' id="svg-object" data="svg/hamburg.svg" type="image/svg+xml" style="width: 300px"></object>
I tried with JS and ended up with jQuery .ready to be sure, I load svg before executing JS on it. Also, I put my script in the beginning of the page, so it "loads" before svg does. But nothing helps ...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Zimmerangebote - 2live 2gether</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--FÜR SVG-->
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#svgdotjs/svg.js#3.0/dist/svg.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
/*GOOGLE FONT*/
#import url('https://fonts.googleapis.com/css2?family=Oswald:wght#200;300;400;500&display=swap');
</style>
<script type="text/javascript">
$('#svg-object').ready(function(){
var street = $('path').get();
console.log(street);
});
function showStreet() {
swal("Angebot-ID: 8426 PLZ: 20146 teilmöbliertes Zimmer, 23 m2 Frei ab: 01.01.2020 Nebenkosten: 40 Euro");
}
</script>
</head>
console returns the following, no matter what I select: path , class or id.
I upgraded from Angular 7.2 to Angular 8 and now all the Angular scripts are inserted at the very start of the HTML (before !DOCTYPE).
Is this a bug? Does anyone know what might be causing it?
<script src="runtime.js" defer></script><script src="polyfills-es5.js" nomodule defer></script><script src="polyfills.js" defer></script><script src="styles.js" defer></script><script src="scripts.js" defer></script><script src="vendor.js" defer></script><script src="main.js" defer></script><!DOCTYPE html>
<html>
<head>
<base href="/my-app/" />
<title>My App</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="favicon.ico?v=2" />
<script src="./ng-app-settings.js"></script>
</head>
<app>Loading...</app>
<script type="text/javascript" src="//use.typekit.net/abcdefg.js"></script>
<script type="text/javascript">try { Typekit.load(); } catch (e) { }</script>
</html>
My original HTML is pretty standard. The only oddities are an ng-app-settings.js script that loads some JSON for app config and the use of the TypeKit service for fonts. Neither of these caused a problem for Angular 7.
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<title>My App</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="favicon.ico?v=2" />
<script src="./ng-app-settings.js"></script>
</head>
<app>Loading...</app>
<script type="text/javascript" src="//use.typekit.net/abcdefg.js"></script>
<script type="text/javascript">try { Typekit.load(); } catch (e) { }</script>
</html>
Thanks for any help
Try adding body tags to your HTML.
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<title>My App</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="favicon.ico?v=2" />
<script src="./ng-app-settings.js"></script>
</head>
<body>
<app>Loading...</app>
<script type="text/javascript" src="//use.typekit.net/abcdefg.js"></script>
<script type="text/javascript">try { Typekit.load(); } catch (e) { }</script>
</body>
</html>
Hi I have two page in the iframe(index.html,another-one.html).
index.html has a button which redirected to another-one.html
once another-one.html sent message using window.top.postMessage causing it redirect back to initial one.
index.html (page loaded initially)
another-page.html.
Trigger window.top.postMessage from another-page.html
Redirected to initial page.
Expected should stay at index.html
Host Page or Container Page loaded with index.html
host page code
<iframe src ="http://127.0.0.1:8888/index.html" name="example" id="example" application="yes">
</iframe>
js code in host page
window.addEventListener("message", (e)=>{
if(e && e.data){
this.pagedata = e.data;
}
}, false);
code of index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TEST1</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(()=>{
$("#redirectButton").click(()=>{
window.location.href="./another-page.html";
});
})
</script>
</head>
<body >
<button id="redirectButton" type="button">Redirect</button>
</body>
</html>
code of another-page.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>New Page</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(()=>{
$("#btnMessage").click(()=>{
let obj = {
message:"this is new message"+(new Date())
};
window.top.postMessage(obj, '*');
});
})
</script>
</head>
<body >
Another Page
<input id="btnMessage" type="button" value="Send Again"></input>
</body>
</html>
I am beginner of javascript.
but it doesn't work. plz help me.
I am using Microsoft VSCode.
This is my main.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link rel="javascript" src="script.js"/>
<link rel="stylesheet" href="https://unpkg.com/papercss#1.4.1/dist/paper.min.css"/>
<link rel="stylesheet" href="style.css"/>
<title>Ultimate R-S-P</title>
</head>
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span>
</div>
</body>
</html>
This is script.js
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function(){
console.log("onclick event start");
};
You need change the:
<link rel="javascript" src="script.js"/>
into:
<script src="script.js"></script>
first choice:put script at the bottom of the body
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="script.js"></script>
<link rel="stylesheet" href="https://unpkg.com/papercss#1.4.1/dist/paper.min.css" />
<link rel="stylesheet" href="style.css" />
<title>Ultimate R-S-P</title>
</head>
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span></h1>
</div>
<script>
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function() {
console.log("onclick event start");
};
</script>
</body>
</html>
second choice:move your script content to the window.onload=function(){}
window.onload = function() {
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function() {
console.log("onclick event start");
};
};
if you choose this,you have to change your script tag
<link rel="javascript" src="script.js"/>
to
<script src="script.js"></script>
The < link > tag defines a link between a document and an external resource.
The < link > tag is used to link to external style sheets.
The < script > tag is used to define a client-side script (JavaScript).
So, you need to change this code:
<link rel="javascript" src="script.js"/>
into this:
<script type="text/javascript" src="script.js"></script>
Use this tag not the link tag
<script src="script.js"></script>
Also fix your html you are missing an h1 end tag
<h1><span class="badge" id="loginbtn">main</span></h1>
Add Script tag as below.
You have used link tag instead of script.
<script type="text/javascript" src="script.js">
actually i was confused.
that was location of javascript.
solution
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span>
</div>
**<script type="text/javascript" src="script.js"></script>**
</body>
i put the javascript code in the body.
I have a problem, when i try to make a phonegap build and test it on my android phone javascript don't run.
I have simple config.xml file, and there is a preview of my index.html's head :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>My app</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src = "phonegap.js" > </script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=yes">
<link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="Mobile_style.css"><link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link href='https://fonts.googleapis.com/css?family=Quicksand:700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src = "phonegap.js" > </script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady()
{
// do your thing!
}
</script>
<script type="text/javascript">
window.onload = function()
{
MY JS CODE
}
</script>
</head>
<body onload="onBodyLoad()">
MY HTML
</body>
I have two html files, the index.html and the game.html, i have the same links and scripts in the game's head.
i have try to put my code on the but thats not working.
I have search some hours but i can solve the problem.
Thanks for your help !
You should include only one version of jquery. Also you don't need both cordova.js and phonegap.js, choose one script.
Your code may look much more cleaner:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>My app</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=yes">
<link rel="stylesheet" href="Mobile_style.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link href='https://fonts.googleapis.com/css?family=Quicksand:700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
alert("Device is ready");
}
</script>
</head>
<body>
MY HTML
</body>
</html>