I'm trying to create a website, and I'm trying to figure out how to load a page.
For example:
You click on the navigator "Home" then a the bottom of the screen It loads a page witch text saying for example "Hello Word!".
Does anybody know what to do? I'm pretty sure It involves JavaScript.
To dynamically load content, you could make an AJAX call using XMLHttpRequest().
In this example a url is passed to the loadPage() function, in which the loaded content is returned.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function loadPage(href)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", href, false);
xmlhttp.send();
return xmlhttp.responseText;
}
</script>
</head>
<body>
<div onClick="document.getElementById('bottom').innerHTML =
loadPage('hello-world.html');">Home</div>
<div id="bottom"></div>
</body>
</html>
When the div element containing text of "Home" is clicked, it sets the html of div element with id of "bottom" to content found in the "hello-world.html" document at the same relative location.
hello-world.html
<p>hello, world</p>
Ok, what you are looking for is a single page application.
There are plenty of technologies implementing it, but not that easy.
Here is a tutorial I followed for doing it : http://andru.co/building-a-simple-single-page-application-using-angularjs
If you want to go further with SPAs, you will certainly need angular templates.
It's not necessary to use Ajax calls to load html. Use them when need the server to process data successfully before loading the page, if processing was successful.
If you don't have this concern, and you just want to load the html without data processing, a simple anchor tag will suffice:
click
Related
I wonder if it's possible to navigate to a web page via link and zoom in to be 150%?
The only thing I could think about is to rewrite the '.click()' function and change the css there such as '-moz-transform', maybe something like this:
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<a href="https://www.google.com/search?q=kobe&igu=1" id="myLink" ></a>
</body>
<script>
$('#myLink').click(function() { zoom_page() });
function zoom_page()
{
// DO SOMETHING HERE!!
}
function autoClick() {
document.getElementById('myLink').click()
}
window.addEventListener("load", autoClick);
</script>
</html>
but not sure how exactly to do it.
Anyone can help? Thanks!
Andy
Given your example uses the URL of a well-known public site which you, almost certainly. have no control over: You can't do that.
Any JavaScript you run will apply to the current page and not the next one you navigate to.
If you could run JavaScript on arbitrary third-party websites then there would be a major XSS problem everywhere.
If you had control over the destination page then you could modify it with server-side code or JS embedded in the destination page contingent on data passed from the previous page (e.g. via the URL's query string).
I dont want to reveal html page content if one specific javascript is not fully loaded. I want to show blank page when this javascript is loading. Javascript is located in .js file, so in html page it looks like this:
<script src = "file.js"></script>
Put the script tag into the head element of the html document, e.g.
<!doctype html>
<html>
<head>
<script src="file.js"></script>
</head>
<body>
</body>
</html>
This depends on whether file.js performs asynchronous operations.
If your file contains simple, synchronous code, a hackish solution would be to put document.body.style.display="none" at the start of the code and document.body.style.display="block" at the end. This will hide your document body until the script reaches the end.
A more robust solution would be to make sure all your code is in appropriate functions, and wrap the initial function with a callback that displays the body.
window.onload = runOnLoad( function() { document.body.style.display="block"; } );
function runOnLoad( callback ) {
document.body.style.display="none";
// rest of your code
callback();
}
I have a website and I want to use my dropdown menu as a separate code from any links in website.
http://www.stelianpopa.ro/photo/ancar.html
I use the code for my menu in menu.html and I integrated on website based on this example: http://api.jquery.com/load/
The codes are loaded but most of the time the drop menu doesn't work, even if appear to be loaded, it shows only the first line and not the submenu for "photo" and "video"
Any help for that?
Basically wat I want is to have my menu as an independent file and to be loaded on any html on my website as a reference, because when I want to add something in the menu I had to do it on every single html and that's why I want to be standalone, to modify once for every html.
Sorry for my bad english.
If not already, make a html file that includes your menu (dropdown).
Then, on every page that you want to use the menu, include an iframe pointing to the html file you created for your menu.
For example:
Menu.html
<html>
<head></head>
<body>
<!-- code for menu -->
</body>
</html>
Every page you want to use the menu on
<html>
<head>...</head>
<body>
<!-- content -->
<iframe src='path/to/menu.html'>Sorry, but your browser does not support iframe.</iframe>
</body>
</html>
Hope this works for you.
Without templating, you can use javascript to load template onto the page. I would set up a mini project for this to avoid copy-pasting, but the basics are below
In the body where you want the menu:
<div id="my-nav-menu"></div>
script:
document.addEventListener('DOMContentLoaded', function() {
var menu = document.getElementById('my-nav-menu');
menu.innerHTML = 'menu html here';
});
Update
I just noticed the jquery tag, so you can use the following script instead:
$(document).ready(function() {
$('#my-nav-menu').html('menu html here');
});
I am trying to entegrate 3D Secure payment logic with javascript.
As I post the credit card info to bank, I get a reply html.. This html redirects the screen to 3D Password screen of the bank which is
<html>
<head>
<title>MDpay default response template for web</title>
</head>
<body bgcolor="#02014E" OnLoad="OnLoadEvent();" >
<form name="downloadForm" action="https://katmai.est.com.tr/mdpayacs/pareq" method="POST">
<!-- Some Input Fields -->
</form>
<SCRIPT LANGUAGE="Javascript" >
function OnLoadEvent() {
document.downloadForm.submit();
}
</SCRIPT>
</body>
</html>
if we want to open this html in a pop up screen, OnLoadEvent does not get triggered with :
var popup = window.open('','');
popup.document.write("'"+data+"'");
popup.focus();
bu if this does work which is everything good. I call the onload function in body so i dont care what is the function to be called in OnLoad.
var popup = window.open('','');
popup.document.write("'"+data+"'");
popup.document.body.onload();
popup.focus()
BUT, we don't want to do this in popup, we dont want to open a new tab or page. We want to do this on same screen that we get the values from the user.. So I write the returning html to a div, but because there can be no 2 body tags in one html, the browser does not include the new body tag which includes OnLoad function name..
document.getElementById('vpos').innerHTML=data;
document.downloadForm.submit() // this is the code that works in OnLoad function.if a write that code statically of course it works, but this code logic can always change.
How will I solve this. Hope I am clear..
I have the following code in my page
<html>
<head>
<title>testpage</title>
<script language = 'javascript'>function fchange(){alert(document.getElementById("ifrm").value);</script>
</head>
<body>
<iframe id = 'ifrm' src = 'http://www.google.com' width = '700' height='500'></iframe><input type='button' onclick = 'fchange()' value = 'clickhere'>
</body>
</html>
From this I click the button and an alert box dispalys undefined. But I need the content or the source of the page ('http://www.google.com'). Please help me to do this.
Thanks in advance...
You can't do this, as it breaks the same-origin policy.
If both pages are on the same domain then you can with do what #Joel suggests, or the slightly more old fashioned:
window.frames['ifrm'].document.body.innerHTML;
You'll need <iframe name="ifrm" ...> for this to work.
If you want the source of the iframe, you would need to access the document object of the iframe.
function fchange()
{
alert(document.getElementById("ifrm").contentWindow.document.body.innerHTML);
}
As mentioned by others, you cannot get the source of an iframe which points to a page outside your domain.
You need to have back-end script for that. I think that's the only way. AJAX would not allow to make a request to other domains for security reasons.