I am trying to load a html, which will act as a header . The code that i have for this purpose is :
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>
function loadContent(divName,pageURL) {
alert(divName+"--"+pageURL);
$("#" + divName).load(pageURL);
}
$(document).ready(function() {
loadContent('header','D:\\cracker\\RollingMenu\\index.html');
});
</script>
</head>
<body>
<div id="header"></div>
</body>
</html>
Here, i can see the alert that is popping up, when the page loads, but the header is not coming up in the page . However, when i try to access the header(index.html) using the url that i am passing , i can see the html getting rendered.
Any one , any ideas as to what i may be doing wrong here ?
Related
Well i am working on a website wordpress and i want to add javascript code to the article but it doesnt run !!
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script type="text/javascript">
document.write(5 + 6);
</script>
</body>
</html>
here the code , i tried custom field but it doesnt work also .
enter image description here
where i add the code exactly
If you're using gutenberg editor then you need to add custom html block to print out your script.
Check my backend screenshot: https://prnt.sc/rjqti4
Check my frontend screenshot: https://prnt.sc/rjqu3y
And if you're trying to do it on custom code then you should go for create a custom template or on single.php or on page.php file you simply use this code to load the desired items. Basically this is not the proper way to add script in WordPress though if you're using this script only on certain pages.
I would assume wordpress is stripping it out, you may need a plugin such as https://wordpress.org/plugins/simple-embed-code/#description to use script tags inside a post
You can add javascript code inside WordPress post > "Text" tab like:
<script type="text/javascript">// <![CDATA[
document.write(5 + 6);
console.log("Please check console: ", (5+6));
// ]]></script>
After adding this, save the WP post and then view the page in the browser.
<!doctype html>
<html lang="en">
<head>
<title>Greetings Page</title>
<link rel="stylesheet" href="./first.css" />
</head>
<body>
<h1>Greetings</h1>
<p id="greeting">Hello, World</p>
<script type="text/javascript">
setTimeout(function() {
document.getElementById('greeting').innerHTML = 'Hello JavaScript!';
}, 3000);
</script>
</body>
</html>
I am working on a legacy app that has an iframe involved. The back button is working on the iframe and I need it to bypass the iframe and work on the parent window only.
Here is a dumbed down version of the issue and description of what I know.
the main page "index.html" has an iframe that is being added via javascript. It loads a.html, makes an ajax call that then does a window.location = "b.html" At this point if you use the back button it essentiallys makes the iframe go back to a.html and then redirects to b.html so you are effectively stuck on the page. If I remove the ajax call and do an window.location on load everything works ok. However given the architecture and what happen on the page I can't remove the Ajax call from the picture.
Here is the code I am looking at, let me know your thoughts on how to solve this issue. Also I should mention in Chrome 41 this isn't an issue, however the newer chrome 48 and 49 it is an issue. I tried history.replaceState but wasn't able to figure out a way to use it in this situation that made things work.
index.html
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
hello world!
<div id="iframeContainer"></div>
<script>
$(function () {
var newIframe = document.createElement('iframe');
newIframe.src = "a.html";
newIframe.id = "A";
document.getElementById("iframeContainer").appendChild(newIframe);
});
</script>
</body>
</html>
a.html
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body style="background-color:#F00;">
<script>
$(function(){
$.ajax({
url:"b.html",
complete:function(){
window.location="b.html";
}
});
});
</script>
</body>
</html>
b.html
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body style="background-color:#00F;">
<script>
$(function(){
})
</script>
</body>
</html>
This is only possible in HTML5 compatible browsers, and it would go something like this..
This goes in the child frame..
// catch the back button click.
window.onpopstate = function(event) {
// make the parent window go back
top.history.back();
};
This also only works if both frames are in teh same domain.
i am trying to get a page to load using Geobytes.
<html>
<head>
</head>
<body style="background: transparent; border: none;">
<script src="http://gd.geobytes.com/Gd?pages=US&ext=html&after=-1" language="Javascript"></script><script language="javascript">// <![CDATA[
if(typeof(sGeobytesLocationCode)!="undefined"&&sGeobytesLocationCode.indexOf('US')==0)
{
document.write("<META HTTP-EQUIV='Refresh' CONTENT='06; URL=http://www.example.com'>");
}
// ]]></script>
</body>
</html>
can anyone point me in the right direction? I can get function onload to work since its a popup window.
<html>
<head>
<script src="http://gd.geobytes.com/Gd?pages=US&ext=html&after=-1" type="text/javascript"></script>
<script>
function after_load() {
if (typeof (sGeobytesLocationCode) != "undefined" && sGeobytesLocationCode.indexOf('US') == 0)
{
document.write("<META HTTP-EQUIV='Refresh' CONTENT='06; URL=http://www.example.com'>");
}
}
</script>
</head>
<body onload="after_load()" style="background: transparent; border: none;">
</body>
</html>
The load event fires when all the content on your page fully loads including the DOM (document object model) content, asynchronous javascript, frames and images.
You can also use the DOMContentLoaded event instead (faster) when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
<script>
// For legacy browsers use this instead: window.onload = function()
window.addEventListener('load', function () {
if(typeof(sGeobytesLocationCode)!="undefined" && sGeobytesLocationCode.indexOf('US')==0)
{
document.write("<META HTTP-EQUIV='Refresh' CONTENT='06; URL=http://www.example.com'>");
}
}, false);
</script>
The right answer...
The question is a bit misleading which seems to have started people down the wrong path. There is no need for a document onload handler. The code below works as expected without one.
This is an example I took from the GeoBytes site and reworked. The meta tag redirect part also works, but I've disabled it in the code posted here. The aim of the code is to automatically redirect users to a country specific page.
The GeoBytes site has many free web services and is worth a look.
Run the snippet to test:
<html>
<head>
<script src="http://gd.geobytes.com/Gd?pages=US&ext=html&after=-1" type="text/javascript"></script>
<script type="text/javascript">
// DISABLED: Redirect vistors from USA to www.whitehouse.gov by inserting a meta tag
if(typeof(sGeobytesLocationCode)!="undefined" && sGeobytesLocationCode.indexOf('US')==0) {
// document.write("<META HTTP-EQUIV='Refresh' CONTENT='0; URL=https:\\www.whitehouse.gov'>");
}
</script>
</head>
<body>
GeoBytes API
<p>
<script type="text/javascript">
document.write('sGeobytesLocationCode = ' + sGeobytesLocationCode );
</script>
</body>
</html>
I have an HTML page that calls a JS file. Within that JS file I need to know what the URL of the HTML page is.
So far I have this.
HTML -
<!doctype html>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Within my main.js I have the following:
$(function() {
$ = jQuery;
window.remoteUser = "%globals_server_REMOTE_USER%";
window.targetURL = "%globals_asset_url%";
console.log(document.referrer);
});
I thought document.referrer would return the URL of the html page. However it returns a blank line in the console.
Any help would be great. Thanks
Try this,
console.log(document.URL);
OR
console.log(window.location.href);
since i read that it doesn't work in some versions of firefox
location.href used to get url the of page.
jQuery(document).ready(function(){
jQuery("#url1").html(location.href);
});
DEMO
I have two html file
a.html
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="content">
hello every one
</div>
</body>
</html>
and another page
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="result">
</div>
<iframe id="ifr" src="http://example.com/a.html">
</iframe>
<script type="text/javascript">
divv = $('#ifr').contents().find('div#content').clone();
$('#result').html(divv.html());
</script>
</body>
</html>
In second one I try to get first html and get contet div in it.after that I put this value to result div .
but It's not work. How can I do that.
You do not need to use an iframe; you can use ajax to do that. It's very straight forward.
$(function() {
$('#result').load('a.html #content',function()
$(this).html( $('#content').html() );
});
});
EDIT
As evident from comments below, scope of question has changed. The two pages are on different domains without CORS. Therefore the above answer would not work.
In order to use ajax, you may want to create a server-side script to act as a proxy. Then you'll call that script on your server and it will fetch the a.html page for you.
I guess that could be the right way.
var ifr = document.querySelector('#ifr');
var html = ifr.contentDocument.querySelector('div#content').innerHTML;
$('#result').html(html);