I have a index.html page, which contains a buttonid="my-btn"
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>My INDEX PAGE</title>
</head>
<body>
<div id="my-canvas"></div>
<br><input type="button" id="my-btn" value="OPEN NEW WINDOW"/>
<script src="js/jquery-1.5.1.js"></script>
<script src="js/raphael.js"></script>
<script src="js/my-graph.js"></script>
<script src="js/my.js"></script>
</body>
</html>
js/my.js invoke createCircle function from my-graph.js, and handles button click event, when my-btn button is clicked, a new browser window will be popped up with a new page (test.html)
my.js:
MyTest.createCircle();
$('#my-btn').click(function(){
window.open('test.html', 'testwindow');
});
my-graph.js:
MyTest= function(){
var paper = Raphael("my-canvas", 320, 200);
var st=paper.set();
return {
createCircle: function(){
st.push(
paper.circle(10, 10, 5),
paper.circle(30, 10, 5)
);
}
getSet: function(){
return st;
}
};
}();
The new page(test.html) opened in new browser window:
test.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>TEST</title>
</head>
<body>
<div id="my-name"></div>
<script src="js/jquery-1.5.1.js"></script>
<script src="js/my-graph.js"></script>
<script src="js/test.js"></script>
</body>
</html>
In the new page, test.js will be invoked and I want to pass the Paper.set() st from my-graph.js to this test.js and output st.length as the content of this page
js/test.js
$(document).ready(function(){
var st=MyTest.getSet();
$("#my-name").append("<strong>"+st.length+"</strong>");
});
But I always get 0 length of the st in new popped up page. Why?
so your opening a new page with script references to the same code
as the other page
That dosent mean that they have the same state.
The new page will get its own state from evaluating
the script itself
what you can do is save the reference that
var w = window.open('test.html', 'testwindow');
returns you can use that for calling a function on your new page
or you can yost do all the code on the start page with jquery
and useing that window object as your context
var w = window.open('test.html', 'testwindow');
$(w).ready(function() {
$("body", w).append(mystuff);
});
raphael objects are set to a paper i think not shure what will
happend when passing them betwen papers :S
Related
This question already has answers here:
How to prevent a click on a '#' link from jumping to top of page?
(24 answers)
Closed 2 years ago.
I'm student and it hasn't been long since I studied programming.
below code is simplified than real for explain.
'test()' is actually Ajax function to get data.
My goal is making 'a tag' for paging operation.
But when i clicked 'a tag', 'test()' inside of '$(document).ready' is called after 'a tag' click event occurred.
So page is always back to 1.
I don't know why this happen.
Anyone could help me?
Thank you!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
var page = 1;
$(document).ready(function(){
test();
alert(page);
});
function test(){
for(var i = 1; i <= 3; i++) {
var a = $("<a></a>").text(i).attr({
href: "",
idx: i
});
a.preventDefault;
$(a).click(function(){
page = $(this).attr("idx");
test();
alert(page);
});
$("#pageLink").append(a," ");
}
}
</script>
</head>
<body>
hello!
<div id="pageLink"></div>
</body>
</html>
For some reason you're calling test() inside of test(). There are a few minor things you need to change also
Prefix jQuery objects with $. var $a=... to avoid ambiguity.
preventDefault is used on the event, not the jQuery object. $a.click(function(event){event.preventDefault();...});
Otherwise it works as I believe you want it to, alerting the page number on click.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
createLinks();
});
function createLinks(){
for(var i = 1; i <= 3; i++) {
var $a = $("<a></a>").text(i).attr({
href: "",
idx: i
});
$a.click(function(event){
event.preventDefault();
page = $(this).attr("idx");
// why are you calling this again? // test();
// maybe you want to load something // loadSomething(page);
alert(page);
});
$("#pageLink").append($a," ");
}
}
</script>
</head>
<body>
hello!
<div id="pageLink"></div>
</body>
</html>
I'm trying to launch a HTML file in firefox automatically
Our company has IE set as the default and this file is meant to launch in firefox to work properly
This is the code I have to check that, but for some reason it doesn't want to work properly
The filepath is correct which was the first thing I thought of
Can anyone assist?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="opener_files/opener.css" media="screen" type="text/css">
<script type="text/javascript">
function codeAddress(){
if (browserName = "Internet Explorer");
var shell = new ActiveXObject("WScript.Shell");
shell.run('"Firefox" "file:///Mel19a001ppn/transfer/L&D_LT&S/SimonW/Sean/DEBT T1 Re-design/SD_Debt_Systems_Introduction/intro.html"');
}
window.onload = codeAddress;
window.setTimeout(CloseMe);
function CloseMe()
{
window.open('','_parent','');
window.close();
}
</script>
</head>
</html>
Edit:
I played around with it some more, and got this to run and launch firefox
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="opener_files/opener.css" media="screen" type="text/css">
<script type="text/javascript">
function codeAddress(){
if (navigator.userAgent.indexOf("MSIE") != -1 ) {
var shellApp = new ActiveXObject("Shell.Application");
var commandtoRun ="C:\\Program Files (x86)\\Mozilla Firefox\\firefox.exe";
shellApp.ShellExecute(commandtoRun,"","", "open", "3");
}
}
window.onload = codeAddress;
window.setTimeout(CloseMe);
function CloseMe()
{
window.open('','_parent','');
window.close();
}
</script>
</head>
</html>
That opens firefox properly but now I can't work out how to load the filepath that I have
Any ideas?
You can get the installation path of FireFox from the Windows Registry, like so:
var shell = new ActiveXObject("WScript.Shell"),
cVer = shell.RegRead('HKLM\\SOFTWARE\\Mozilla\\Mozilla Firefox\\currentVersion'),
FF = '"' + shell.RegRead('HKLM\\SOFTWARE\\Mozilla\\Mozilla Firefox\\' + cVer +'\\Main\\PathToExe') + '"';
And then try to run FireFox:
shell.Run(FF + ' "\\\\Mel19a001ppn\\transfer\\L&D_LT&S\\SimonW\\Sean\\DEBT T1 Re-design\\SD_Debt_Systems_Introduction\\intro.html"');
I'm developing in an application where new code is introduced via iframes only. I'm trying to create a function (running inside an iFrame) that will append some html after the iFrame in which it is running. I'd rather not introduce jQuery to resolve this issue. Here is a sample
function AppendDivAfteriFrame() {
var iFrame = window.parent.document.getElementById(window.frameElement.id)
var newDivInParent = window.parent.document.createElement('div');
newDivInParent.setAttribute("Id", "MyDiv");
newDivInParent.innerHTML = 'Hello World! I am outside the iFrame';
iFrame.appendChild(newDivInParent);
}
I don't receive any exceptions, but I never see any results either.
Update with full code
Call this page InnerPage.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function AppendDivAfteriFrame() {
var iFrame = window.parent.document.getElementById(window.frameElement.id)
var newDivInParent = window.parent.document.createElement('div');
newDivInParent.setAttribute("Id", "MyDiv");
iFrame.appendChild(newDivInParent);
parent.document.getElementById('MyDiv').innerHTML = 'Hello World! I am outside the iFrame';
}
</script>
</head>
<body>
<button onclick="AppendDivAfteriFrame()">Append HTML</button>
</body>
</html>
Call this page OuterPage.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<iframe src="InnerPage.html" id="MyiFrame"></iframe>
</body>
</html>
This works:
function AppendDivAfteriFrame() {
var iFrame = window.parent.document.getElementById(window.frameElement.id)
var newDivInParent = window.parent.document.createElement('div');
newDivInParent.setAttribute("Id", "MyDiv");
iFrame.parentNode.appendChild(newDivInParent); //Edited here
parent.document.getElementById('MyDiv').innerHTML = 'Hello World! I am outside the iFrame';
}
I have two HTML files, FirstWindow and SecondWindow. FirstWindow has FirstWindowJS.js as its script and SecondWindow has SecondWindowJS.js as its script.
Through FirstWindowJS.js, I open SecondWindow.html. However, I am unable to create an element for it. Here's the code along with the problem -
FirstWindow.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>FirstWindow</title>
</head>
<body>
<script type="text/javascript" src="FirstWindowJS.js"></script>
</body>
</html>
SecondWindow.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>SecondWindow</title>
</head>
<body>
<script type="text/javascript" src="SecondWindowJS.js"></script>
</body>
</html>
FirstWindowJS.js
main();
function main()
{
var myWindow = window.open("SecondWindow.html", "My Window",
"resizable=0,width=700,height=600");
var e = myWindow.document.createElement("currentUserElement");
e.setAttribute("id", "currentUserElement");
e.setAttribute("value","John");
}
SecondWindowJS.js
main();
function main()
{
var e = document.getElementById("currentUserElement");
var value = e.getAttribute("value");
console.log("value = "+value);
}
The error that I get in the SecondWindowJS.js is -
TypeError: e is null
Why is "e" null? What is the mistake?
It's possible that the new window runs its JavaScript before the opener's script continues, but it's more likely that you can't use getElementById on an element that has not been appended to the document yet.
myWindow.document.body.appendChild(e);
You create the element, but it doesn't look like you are adding it to the DOM. An element doesn't exist in the DOM until you explicitly add it using the parentNode.appendChild() method.
In your case it would look something like this, if you just want to add the element as the last element in your body-element:
function main()
{
var myWindow = window.open("SecondWindow.html", "My Window",
"resizable=0,width=700,height=600");
var e = myWindow.document.createElement("currentUserElement");
e.setAttribute("id", "currentUserElement");
e.setAttribute("value","John");
// The element doesn't exist in the DOM until you explicitly add it
myWindow.document.body.appendChild(e);
}
My index.html has a button(id="my-btn"):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>My INDEX PAGE</title>
</head>
<body>
<br><input type="button" id="my-btn" value="OPEN NEW WINDOW"/>
<script src="js/my.js"></script>
</body>
</html>
above page include my.js which handles button click event, when button clicked, a new browser window will be opened with a new page(test.html)
my.js:
$('#my-btn').click(function(){
window.open('test.html', 'testwindow');
});
The new page (test.html) opened/popped up in new browser window:
test.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>TEST</title>
</head>
<body>
<div id="cars"></div>
<script src="js/jquery-1.5.1.js"></script>
<script src="js/mycar.js"></script>
<script src="js/test.js"></script>
</body>
</html>
In the new page, test.js is included which will call functions in MyTest and append the text of number of cars as the content of this pop-up page:
js/test.js
$(document).ready(function(){
MyTest.updateCars(); //MyTest is a function defined in mycar.js
var cars = MyTest.getCars();
$("#cars").append("<strong>number of cars: "+cars.length+"</strong>");
});
Function MyTest is defined in mycar.js:
js/mycar.js
var MyTest = function(){
var cars=[];
var updateCars=function(){
cars.push('car 1', 'car 2');
};
return{
updateCars: function(){
updateCars();
},
getCars: function(){
console.log(cars.length);
return cars;
}
};
}();
But, when the test.html page popped up in a new browswer window, the number of cars is always 0.
As you saw above I have called updateCars() function of mycar.js in test.js but the pop up window does not show the updated cars number , how can I get the updated cars(that's 2 cars, car1 and car2) in the new popped up window?
(I have jquery-1.5.1.js under "js/" directory)
hey i pasted your code in a page and it displayed
number of cars: 2
it seems to work are you just referencing the script wrong?
have you tried the debugger on chrome or firebug?