sorry this problem might be resolved already, but I have not been able to find the answer.
I basically have 2 files:
form.html code:
<!DOCTYPE html>
<html>
<head>
<title>BACKUP MONITOR</title>
<script>
function getEvents()
{
alert("getEvents");
}
alert("in HTML");
var w = window.open();
var s = w.document.createElement("script");
s.type = 'text/javascript';
s.src = ".../fileA.js";
w.document.body.appendChild(s);
w.alert("New Window");
</script>
</head>
<body>
</body>
</html>
fileA.js code:
alert("in fileA");
getEvents();
Question:
I can't call getEvents() from fileA.js (new Window). Is there any way to do this?
thank you very much
Related
I want to insert a button in a page WordPress that open this a JavaScript when a click happened.
The HTML script is this
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
test=()=>{
var script = document.createElement('script');
script.src = 'https://www.jdoodle.com/assets/jdoodle-pym.min.js';
var head = document.getElementsByTagName("head")[0];
head.appendChild(script);
}
</script>
<input type="button" onclick="test()" value="test">
<div height="200px" width="300px" data-pym- src="https://www.jdoodle.com/iembed/v0/x6e?rw=1"></div>
</body>
</html>
I've tried to insert a jquery version like this.
On wordpress page
<button onclick="F()">Click me</button>
and in functions.php
function javascript_footer() {
?>
<script>
// your javscript code goes
function F(){
alert("test");
$.getScript("https://www.jdoodle.com/assets/jdoodle-pym.min.js", function(data, textStatus, jqxhr) {
});
alert("stop");
}
</script>
<?php
}
add_action('wp_footer', 'wpb_hook_javascript_footer');
What's is wrong? it seems that it doesn't load property the script.
Thank you.
Enqueue your script.
See wp_enqueue_script() for more details.
/**
* Enqueue a script with jQuery as a dependency.
*/
function wpdocs_scripts_method() {
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom_script.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method' );
Your problems though
Is that you're currently not declaring your anonymous function test()
Try:
const test = () => {
var script = document.createElement('script');
script.src = 'https://www.jdoodle.com/assets/jdoodle-pym.min.js';
var head = document.getElementsByTagName("head")[0];
head.appendChild(script);
}
The document.write causing the error SCRIPT70: Permission denied if you use a few document.write inside iframe. This error occurs only in the Edge. In all other browsers this error is not observed.
For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SSP-558</title>
</head>
<body>
<script>
document.write("1");
document.write("2");
</script>
<script>
var iframe = document.createElement("iframe");
iframe.width = window.outerWidth;
iframe.height = window.outerHeight;
iframe.onload = function () {
var doc = iframe.contentWindow.document;
var script = doc.createElement("script");
script.type = "text/javascript";
script.text = [
'document.write("1");',
'document.write("2");'
].join("");
doc.body.appendChild(script);
};
document.body.appendChild(iframe);
</script>
</body>
</html>
This code will display 12 on the page and in iframe, but it cause an error and displays only 1 inside iframe in Edge.
If you use only one document.write everything works fine. Unfortunately, the code that contains several document.write comes from a third-party developers and they can't change it.
Have you encountered this error and is there any solution for it?
There was found a solution. If you add window in front of document.write the error will not be caused.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SSP-558</title>
</head>
<body>
<script>
document.write("1");
document.write("2");
</script>
<script>
var iframe = document.createElement("iframe");
iframe.width = window.outerWidth;
iframe.height = window.outerHeight;
iframe.onload = function () {
var doc = iframe.contentWindow.document;
var script = doc.createElement("script");
script.type = "text/javascript";
script.text = [
'window.document.write("1");',
'window.document.write("2");'
].join("");
doc.body.appendChild(script);
};
document.body.appendChild(iframe);
</script>
</body>
</html>
I have the below code that will dynamically create the script tag.
<html>
<head>
<title>Applying</title>
</head>
<body>
<script>
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
function(m,key,value) {
vars[key] = value;
});
return vars;
}
var variable1 = getUrlVars()["parameter1"];
var myScript = document.createElement('script');
myScript.setAttribute('type', 'text/javascript');
myScript.setAttribute('urlId', '420');
myScript.setAttribute('dataTitle', variable1);
myScript.setAttribute('dataemail', 'admin#domain.net');
document.body.appendChild(myScript);
</script>
<input name="Apply" type="button" id="Apply" value="Apply" ONCLICK="window.location.href='https://www.google.com?'">
</body>
</html>
But somehow the above code doesn't work in IE but it works fine in Chrome. I am not sure what is the reason? Can anybody help me with that?
This whole things doesn't work in IE.
var myScript = document.createElement('script');
myScript.setAttribute('type', 'text/javascript');
myScript.setAttribute('urlId', '420');
myScript.setAttribute('dataTitle', variable1);
myScript.setAttribute('dataemail', 'admin#domain.net');
document.body.appendChild(myScript);
You can dynamically add a script element using the following function.
var create_script = function(data) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.text = data;
//if you have to debug dynamically loaded script in chrome use the following - sourceURL has changed in the recent versions of chrome devetools.
//script.text = data + "\n\n //# sourceURL=" + ns + ".js\n";
//append the script element to body or head or where it seems fit.
document.body.appendChild(script);
}
the "data" parameter is the actual javascript code/URL that will form the part of the script tag. You are missing this in your code.
EDIT:
for non-standard attributes you might want to change the doctype according to http://www.w3schools.com/DTD/dtd_attributes.asp
I want to load js on the fly which is happening but the one more js file which is included in index is loading before (file i am loading dynamically) is there way to fix the order
i am adding global.js dynamically and i want variable declared in global.js shoud be initialised before dynamicjs.DynamicJs is loaded
------------- Index.html -------------
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons"
data-sap-ui-theme="sap_goldreflection" >
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script src="js/dyn.js"></script>
<script></script>
<script>
sap.ui.localResources("dynamicjs");
var view = sap.ui.view({id:"idDynamicJs1", viewName:"dynamicjs.DynamicJs", type:sap.ui.core.mvc.ViewType.JS});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
function loadScript(url){
var xhrObj = createXMLHTTPObject();
// open and send a synchronous request
xhrObj.open('GET', url, false);
xhrObj.send('');
var e = document.getElementsByTagName("script")[1];
var d = document.createElement('script');
d.src = url;
d.type = 'text/javascript';
d.async = false;
d.defer = false;
e.parentNode.insertBefore(d,e);
}
function addScriptDynamically(){
loadScript('js/global.js'+'?scheme=12345');
}
function createXMLHTTPObject(){
var xmlhttp=new XMLHttpRequest();
if( typeof xmlhttp == 'undefined' || xmlhttp == null )
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlhttp;
}
/*call function */
addScriptDynamically();
Why won't you try to load script with jQuery.getScript()
http://api.jquery.com/jQuery.getScript/
If you want compatibility with other libraries like prototype or mootools you can set jQuery.noConflict()
My source code :
<!doctype html>
<html>
<head>
<title>onload test</title>
<link type="text/css" rel="stylesheet" href="spot.css" media="screen" />
</head>
<body>
<h1>Welcome Page</h1>
<script>
debugger;
function constructScripts(url, callBack) {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
if (script.readyState) {
script.onreadystatechange = function () {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null; callBack();
}
};
}
else {
script.onload = callBack;
}
}
</script>
<script>
debugger;
myCallBack = function () {
alert(this.src + "loaded");
}
constructScripts("files1", myCallBack);
constructScripts("files2", myCallBack);
constructScripts("files3", myCallBack);
</script>
</body>
</html>
this.src is undefined here. I guess this should be an 'script' object which supposed to have its src property so that I can read the filename. Who is this here? And also when I view the page source these scripts were not included in the header() section. Why is it so?
this.src is undefined here.
It shouldn't be… It is defined earlier: script.src = url
I guess this should be an 'script' object which supposed to have its src property so that i can read the filename. Who is 'this' here?
The script element upon which the onload or readystatechange event fires
And also when i view the page source these scripts were not included in the header() section. Why is it so?
Because you are looking at the page source, not a serialisation of the live DOM after it has been manipulated by JavaScript.
When you call you callBack function, pass it the script object like callBack(script). Modify the callBack function like
myCallBack = function (script) {
alert(script.src + "loaded");
}
View source does not show dinamically loaded elements.
You need to extend your function using prototype.
Element.prototype.MyMethod = function(){}
Look at your edited code
<!doctype html>
<html>
<head>
<title>onload test</title>
<link type="text/css" rel="stylesheet" href="spot.css" media="screen" />
</head>
<body>
<h1>Welcome Page</h1>
<script>
Element.prototype.MyMethod = function(){}
function constructScripts(url, callBack) {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
script.MyMethod = callBack;
document.getElementsByTagName("head")[0].appendChild(script);
if (script.readyState) {
script.onreadystatechange = function () {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
script.MyMethod();
}
};
}
else {
script.onload = callBack;
}
}
</script>
<script>
myCallBack = function () {
alert(this.src + "loaded");
}
constructScripts("files1", myCallBack);
constructScripts("files2", myCallBack);
constructScripts("files3", myCallBack);
</script>
</body>
</html>