How do I stop this --!DOCTYPE html-- with two scripts in it from running on mobile devices?
Hiding the div with the URL in it does not work, so apparently stopping one or both of the scripts is necessary. Thanks!
<!DOCTYPE html>
<html>
<script>
function includeHTML() {
var z, i, elmnt, file, xhttp;
/*loop through a collection of all HTML elements:*/
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-left-html");
if (file) {
/*make an HTTP request using the attribute value as the file name:*/
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/*remove the attribute, and call this function once more:*/
elmnt.removeAttribute("w3-include-left-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/*exit the function:*/
return;
}
}
};
</script>
<body>
<div w3-include-left-html="borders/border-left.html"></div>
<script>
includeHTML();
</script>
</body>
</html>
Detect a mobile browser using one of the methods here:
Detecting a mobile browser
If detected, return immediately.
Eg
<script>
function includeHTML() {
if (mobilecheck()) {
return;
}
... code to run on desktops only
</script>
Related
Getting blank screen.
I have to insert a employee card inside a div with id="container" with info from JSON file . I have done styling in 'emp' class.
load();
function load()
{
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var emp=JSON.parse(xhttp.responseText);
for(var i=0;i<emp.length;i++){
var d=document.createAttribute('div');
d.className='emp';
d.innerHTML="Inforamtion";
var c=document.getElementById('container')
c.appendChild(d);
}
}
};
xhttp.open("GET", "employee.json", true);
xhttp.send();
}
You need to use var d=document.createElement('div'); instead of createAttribute(). If you open the console in the browser after running your current code it will say something like (this is in Firefox) "Uncaught DOMException: Node.appendChild: May not add an Attribute as a child".
I am trying to make a post request from my firefox extension. The issue I am facing is that the browser does not even seem to try and make the post request when the script for my extension is loaded.
To make sure that issue was not with the code itself I created a index.html file with a script tag in it and paste my code there and it works.
My extension script file (does not work)
console.log('loaded script')
this.addEventListener('keypress', (e) => {
if (e.key === 'a') {
const url = 'my-server-endpoint'
var selectedText = window.getSelection().toString()
var xhttp = new XMLHttpRequest()
xhttp.open('POST', url, true)
xhttp.setRequestHeader('Content-Type', 'text/plain')
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(JSON.parse(xhttp.response).url)
}
}
xhttp.send(selectedText)
}
})
My index.html file (does work)
<html>
<head>
<meta charset="utf-8">
</head>
Some sample text
<script>
this.addEventListener('keypress', (e) => {
if (e.key === 'a') {
const url = 'my-server-endpoint'
var selectedText = window.getSelection().toString()
var xhttp = new XMLHttpRequest()
xhttp.open('POST', url, true)
xhttp.setRequestHeader('Content-Type', 'text/plain')
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(JSON.parse(xhttp.response).url)
}
}
xhttp.send(selectedText)
}
})
</script>
</html>
My expectations is that the javascript loaded from the extensions should behave in the same way the script tag does. I am stuck and all help is appreciated.
I solved this by updating my the permissions propety in my manifest.json file.
Here is what I added "permissions": ["*://*/*"]. It now matches the expression in the matches field of the content_scripts property.
Big thanks to #Titus for the hint about the manifest.json file!
<div id="import" includeHTML="page.html"></div>
function getInclude() {
var x = document.getElementById("import").includeHTML; //returns 'undefined'
alert(x);
}
function modInclude() {
document.getElementById("import").includeHTML = "page2.html"; //does nothing and FF's console outputs nothing
}
I'm working on a project using W3's Import HTML and I would like to change the imported page using Javascript. No problem there, I thought it would be the same as changing the source of an image.
The syntax I tried didn't work. I did a little investigating and found out that the property itself returns 'undefined', which is a little strange considering it imports the page like it should.
Probably you could use:
document.getElementById("import").setAttribute("w3-include-html", "contentYouWant.html");
Edit: I took w3 documentation of that w3-html-include and add a simple snippet you could check to understand what is really happening. Snippet only change the attribute and alert to ensure it has been changed. Weird :'D Function is from official docs.
<script>
function includeHTML() {
var z, i, elmnt, file, xhttp;
/*loop through a collection of all HTML elements:*/
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/*make an HTTP request using the attribute value as the file name:*/
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/*remove the attribute, and call this function once more:*/
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/*exit the function:*/
return;
}
}
};
</script>
<div id="inc" w3-include-html="page1.html"></div>
<script>
includeHTML();
alert("Includes: " + document.getElementById("inc").getAttribute("w3-include-html"));
document.getElementById("inc").setAttribute("w3-include-html", "page2.html");
alert("Includes: " + document.getElementById("inc").getAttribute("w3-include-html"));
</script>
Cheers
When using this code no CSS/Javascript works (It just loads the HTML):
function functionName(limit) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
var text = xhttp.responseText;
document.getElementById("content").innerHTML = "";
document.getElementById("content").innerHTML = text;
}
}
xhttp.open("GET", "?x=test&limit=" + limit, false);
xhttp.send();
}
When using jQuery CSS/Javascript works, now the problem is that the page scrolls up when loading the content.
$('#content').load('?x=test&limit=" + limit);
What I want is a way to load an URL to a DIV, where CSS and Javascript works.
And like .innerHTML I want to load the content without scrolling to the top.
Hope for help, yesterday i googled for 6-8 hours, and im a google-fu guru =)
Still got the same problem!
When using XMLHttpRequest and .innerHTML it loads the HTML (without scrolling up to the start of the div). But no Javascript or CSS works...
And with this it loads Javascript and CSS when .load'ing. But it scrolls up to the start of the div.
$('#content').load("?x=test&limit=" + limit);
function functionName(limit) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
var ele = document.createElement("script");
ele.src = "js/some-js-ajax.js";
document.body.appendChild(ele);
var text = xhttp.responseText;
document.getElementById("content").innerHTML = "";
document.getElementById("content").innerHTML = text;
}
}
xhttp.open("GET", "?x=test&limit=" + limit, false);
xhttp.send();
}
When adding:
var ele = document.createElement("script");
ele.src = "js/some-js-ajax.js";
document.body.appendChild(ele);
.innerHTML works with CSS and Javascript, but now it scrolls up to the start o fthe div again. Not staying in the scrolled place where you were before the functionName(limit) load ....
Using this code below I can load an HTML page to a div, in my site, by clicking a link in my menu.
Now, the problem is that when it loads the HTML page into the div, it loads just fine... but without its original background color that should be loaded with the other content of the HTML page as well. All the other CSS elements seem to be just fine.
Thank you in advanced.
js code:
function processAjax(url)
{
if (window.XMLHttpRequest) { // Non-IE browsers
req = new XMLHttpRequest();
req.onreadystatechange = targetDiv;
try {
req.open("GET", url, true);
}
catch (e) {
alert(e);
}
req.send(null);
} else if (window.ActiveXObject) { // IE
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = targetDiv;
req.open("GET", url, true);
req.send();
}
}
return false;
}
function targetDiv() {
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
document.getElementById("containerDiv").innerHTML = req.responseText;
} else {
alert("Problem: " + req.statusText);
}
}
}
html:
<a onclick="return processAjax(this.href)" href="example.html">CLICK ME</a>
<div id="containerDiv"></div>
Get the style element from the page and append it to the head:
var styles = document.getElementsByTagName('style');
var head = document.getElementsByTagName('head')[0];
for(var x = 0; x < styles.length; x++){
head.appendChild(styles[x]);
}
Edit:
You want to set the returned html as an element first:
var div = document.createElement('div');
div.innerHTML = req.responseText;
var styles = div.getElementsByTagName('style');
for(var x = 0; x<styles.length;x++){
document.getElementsByTagName('head')[0].appendChild(styles[x]);
}
Use the new code, not the old, and put it in the if(reg.status == 200) block.
Change .innerHTML to .html, or just use .load(req.responseText)
.innerHTML overwrites everything I believe. You just want to change a section.