Content page with <meta http-equiv="X-UA-Compatible" content="IE=10"/> - javascript

We are using IE edge for our application but we want to make one particular content page should open in IE 10.
We cant add
<meta http-equiv="X-UA-Compatible" content="IE=10" />
to the master page because it will get reflected in all other pages.
How to implement
<meta http-equiv="X-UA-Compatible" content="IE=10" />
to a particular content.
I tried the following code in the content page but no change.
<script type="text/javascript">
function AddCompatible() {
var m = document.createElement("meta");
m.setAttribute("http-equiv", "X-UA-Compatible");
m.setAttribute("content", "IE=10");
document.getElementsByTagName("head")[0].appendChild(m);
}
_spBodyOnLoadFunctionNames.push("AddCompatible")

Please add the below code in page_init or On_init in code behind.This code will force to IE10 compatible.
HtmlMeta tag = new HtmlMeta();
tag.HttpEquiv = "X-UA-Compatible";
tag.Content = "IE=10";
this.Page.Header.Controls.AddAt(0, tag);

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
</head>
<body>
<script type="text/javascript" nonce="IICYfT/o8JWeqWwgKrYbJA">
document.addEventListener('DOMContentLoaded', function() {
var frameType = window.location.hash[1];
var callbackWindow;
switch (frameType) {
case 't'
FUCk:
callbackWindow = window.parent.opener;
break;
case 'p':
callbackWindow = window.open('', 'gtn-roster-iframe-id');
break;
case 'e':
callbackWindow = window.parent.frames['gtn-roster-iframe-id'];
break;
case 'n':
callbackWindow = null;
break;
default:
throw Error('Unknown frame type: ' + frameType);
}
if (callbackWindow != null) {
callbackWindow['_GC_OnFrameReady'](window);
}
});
</script>
</body>
</html>

Related

How to open several tabs from the press of a button

i want to open several tabs when someone clicks this button.but my current code just opens the first.by the way this is a repost since the previous 1 had a lot of typos that i corrected
<!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.0">
<title>Document</title>
</head>
<body>
<button id="hi" type="submit" onclick="redirect()">button</button>
</body>
</html>
<script>
function redirect(){
var window1 = 'https://google.com';
window.open(window1, '_blank');
var window2 = "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
window.open(window2, '_blank');
var window3 = "https://www.youtube.com/shorts/AlvXHz2pUL4"
window.open(window3, '_blank');
var window4 = "https://www.youtube.com/watch?v=J2GVKuYoIww"
window.open(window4, '_blank');
var window5 = "https://www.youtube.com/watch?v=1Z6CHioIn3s&list=RDMMYrJqDCaeSZg&index=20"
window.open(window5, '_blank');
var window6 = "https://www.youtube.com/watch?v=KbNL9ZyB49c&list=RDKbNL9ZyB49c&start_radio=1&rv=KbNL9ZyB49c&t=32&t=32"
window.open(window6, '_blank');
var window7 = "https://www.youtube.com/watch?v=fB8TyLTD7EE&list=RDKbNL9ZyB49c&index=3"
window.open(window7, '_blank');
var window8 = "https://www.youtube.com/watch?v=Zasx9hjo4WY&list=RDKbNL9ZyB49c&index=8"
window.open(window8, '_blank');
var window9 = "https://www.youtube.com/watch?v=r6zIGXun57U&list=RDKbNL9ZyB49c&index=7"
window.open(window9, '_blank');
var window10 = "https://www.youtube.com/watch?v=v7HAVTyvLqI&list=RDKbNL9ZyB49c&index=8"
window.open(window10,'_blank');
}
</script>

Javascript infinite loop in prompt

So i have just made a simple HTML page in which a JS script runs when the page loads. But the problem is that it just goes infinite after asking password. I tried to find some solutions but failed to do the same. Please help. Below is the code.
<!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.0">
<title>Alert test</title>
</head>
<body onload="alert()">
<script>
function alert() {
var uname, pass, corr_uname = "admin", corr_pass = "admin";
while(!uname) {
uname = prompt("Enter Username: ");
}
while(!pass) {
pass = prompt("Enter Password: ");
}
if((uname == corr_uname) && (pass == corr_pass)) {
alert("Access Granted!!");
} else {
alert("Access Denied!");
alert();
}
}
</script>
<h1>Welcome!</h1>
</body>
</html>
The funny thing is that when i run the same code (JS runs after clicking a button) in W3Schools, it just works fine!!
The problem is that you have created a function named alert which already exists in javascript, so you are calling it recursively and infinitely.
Solution fix
<!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.0">
<title>Alert test</title>
</head>
<body onload="alert2()">
<script>
function alert2() {
var uname, pass, corr_uname = "admin", corr_pass = "admin";
while(!uname) {
uname = prompt("Enter Username: ");
}
while(!pass) {
pass = prompt("Enter Password: ");
}
if((uname == corr_uname) && (pass == corr_pass)) {
alert("Access Granted!!");
} else {
alert("Access Denied!");
myFunction();
}
}
</script>
<h1>Welcome!</h1>
</body>
</html>
I renamed your functional alert to alert2.
Kindly accept it as answer if it works for you, thanks!
JavaScript had mutable built-in functions so your alert function overwrites the native alert and every alert call becomes recursive in a never ending loop.
Besides renaming the function, there's no need to use a while loop since prompt stalls execution. You can use uname && to invalidate the username if the user cancels the username prompt.
There's also no need to use <body onload="??"> if you just put the script within <head>...</head>
<!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.0">
<title>Alert test</title>
<script>
const corr_uname = "admin", corr_pass = "admin";
function authenticate() {
const uname = prompt("Enter Username: ");
const pass = uname && prompt("Enter Password: ");
const isCredentialsValid = uname == corr_uname && (pass == corr_pass);
const accessType = isCredentialsValid ? 'Granted' : 'Denied';
alert(`Access ${accessType}!!`);
}
authenticate();
</script>
</head>
<body>
<h1>Welcome!</h1>
</body>
</html>

Javascript how to change page title with user input

The thing i wanna do is when user writes something to input and sumbits it, the page will change to the input.
Example:
If user writes "Web" to the input, the page title should change to "Web"
Here's the code:
JS:
document.getElementById("titleSumbitBtn").onclick = function (){
var newTitle = document.getElementById("newTitle").textContent;
document.getElementById("title").innerHTML = newTitle;
}
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.0">
<title id="title">Web Editor</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<center><label id="originLabel">Welcome to Web Editor!</label><br></center>
<br><label id="changeTitleLabel">Change the title of Web: </label><br>
<input type="text" id="newTitle"><br>
<button type="button" id="titleSumbitBtn">Change</button>
</body>
</html>
You can assign new title to the document like this:
document.getElementById("titleSumbitBtn").onclick = function (){
var newTitle = document.getElementById("newTitle").value;
document.title = newTitle;
}
This is actual implementation but keep in mind that it must run after the DOM element with id newTitle.
If you put your <script> tag inside <head>, you'll need DOMContentLoaded:
document.addEventListener('DOMContentLoaded', () => {
document.getElementById("titleSumbitBtn").onclick = function (){
var newTitle = document.getElementById("newTitle").value;
document.title = newTitle;
}
})
try this:
document.getElementById("titleSumbitBtn").addEventListener("click", function (){
var newTitle = document.getElementById("newTitle").value;
document.getElementById("title").innerText = newTitle;
})

Switch title text with javascript? HTML / JS

I'm new to JavaScript and I've been trying to get the title text to switch between different texts for a day now. I've gathered some code snippets and put them together, so I'm not quite sure what's going on.
function sleep(milliseconds) {
const date = Date.now();
let currentDate = null;
do {
currentDate = Date.now();
} while (currentDate - date < milliseconds);
}
function switchingText(); {
document.getElementByID("title").innerHTML = "Text";
sleep(2000);
document.getElementByID("title").innerHTML = "Text2";
sleep(2000);
switchingText();
}
I would appreciate any help greatly.
This is a sample solution for your dilemma:
const title= document.getElementById("title");
const switchHeading = () => {
if (title.innerHTML== "Text"){
title.innerHTML = "Text2";
}else{
title.innerHTML = "Text";
}
}
setInterval(() => {
switchHeading()
}, 2000);
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<h1 id="title">Text</h1>
<script src="./script.js" async defer></script>
</body>
</html></html>
Helpful links:
W3Schools Set Interval
All you need to do is get the title element like you did but instead of changing the InnerHTML, change the value, like so:
document.getElementByID('title').value="Text"
Hope you found what you were looking for.
Instead of doing
document.getElementByID("title").innerHTML = "Text";
in the switching text function,
you need to do
document.title = 'your text'

Template literals are not interpolating variables

Just noticed today that template literals with html tags don't work, or maybe I wrote it wrong?
I tried to include p tags in the template literals (which I commented out in the snippet), but it didn't work. Does anyone have any ideas? Thanks!
var blueBtn = document.getElementById('btn');
var aniBox = document.getElementById('animal-info');
blueBtn.addEventListener('click', function() {
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'https://learnwebcode.github.io/json-example/animals-1.json');
ourRequest.onload = function() {
var ourData = JSON.parse(ourRequest.responseText);
addHTML(ourData)
};
ourRequest.send();
});
function addHTML(data) {
var content = '';
for (let i of data) {
console.log(i);
content += '<p>' + i.name + ' is a ' + i.species + '.</p>';
//content += '`<p>${i.name} is a ${i.species}.</p>`'; <--this one doesn't work
}
aniBox.insertAdjacentHTML('beforeend', content);
}
<!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">
<title>JSON and AJAX</title>
</head>
<body>
<header>
<h1>JSON and AJAX</h1>
<button id="btn">Fetch Info for 3 New Animals</button>
</header>
<div id="animal-info"></div>
<script src="js/main.js"></script>
</body>
</html>
Templates are needed to be enclosed in backticks. You don't need to enclose template in quotes again.
You need to change this:
'`<p>${i.name} is a ${i.species}.</p>`'
to this:
`<p>${i.name} is a ${i.species}.</p>`
The former is just a plain JavaScript string, but the latter is the template literal syntax and it allows the sections in ${ ... } to be interpolated.
See the following working example:
var blueBtn = document.getElementById('btn');
var aniBox = document.getElementById('animal-info');
blueBtn.addEventListener('click', function() {
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'https://learnwebcode.github.io/json-example/animals-1.json');
ourRequest.onload = function() {
var ourData = JSON.parse(ourRequest.responseText);
addHTML(ourData)
};
ourRequest.send();
});
function addHTML(data) {
var content = '';
for (let i of data) {
console.log(i);
// content += '<p>' + i.name + ' is a ' + i.species + '.</p>';
content += `<p>${i.name} is a ${i.species}.</p>`;
}
aniBox.insertAdjacentHTML('beforeend', content);
}
<!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">
<title>JSON and AJAX</title>
</head>
<body>
<header>
<h1>JSON and AJAX</h1>
<button id="btn">Fetch Info for 3 New Animals</button>
</header>
<div id="animal-info"></div>
<script src="js/main.js"></script>
</body>
</html>
Read more about template literals in the documentation.

Categories

Resources