I have a project with brunch/jade/backbone that uses an index.html file which calls in everything using backbone, and jade.
index.html (parts):
<html>
<head>
[...]
<script type="text/javascript" src="data/vendor.js"></script>
<script type="text/javascript" src="data/app.js"></script>
<script type="text/javascript" src="data/data.js"></script>
<script type="text/javascript">
require('initialize');
</script>
</head>
<body></body>
</html>
The vendor.js file includes the generated (using brunch) jquery.js, backbone.js, and other libraries I need there. So it is included before usin the script.
My layout.jade:
body
[blah...blah]
script(src="data/credentials.js")
data/credentials.js:
var username="blah";
var password="bluh";
// alert("test");
$(document).ready(function(){
$("#credentials").html(
'<div class="username">' + username + '<div>' +
'<div class="password">' + password + '<div>' +
);
});
I see that the js file is included in the final html file, but the ready function is never executed, whatever I tried. Funnily, if I uncomment the alert, I see no popup neither.
So why is this file found, loaded, but does not execute? I thought each js file that is loaded within an html file is executed there? So the alert function should fire, shouldn't it?
What did I do wrong here?
I think this should do the trick since you didnt include any JQuery.
window.onload('Example');
function Example()
{
document.getelementbyid(credentials).innerHtml =
'<div class="username">' + username + '<div>' +
'<div class="password">' + password + '<div>';
}
Related
I have piece of code:
<!doctype html>
<html lang="en">
<head>
<script src="main.js"></script>
</head>
<body>
<script src="custom.js?token={{token}}"></script>
</body>
</html>
main.js is my script which replace in body tag {{token}} for value provided from Query.
window.onload = function() {
var link_sid = query.get('link_sid');
document.body.innerHTML = document.body.innerHTML.replace(/{{token}}/g, util.protocol() + '://c.' + util.env() + util.domain() + '/' + link_sid);
}
custom.js?token={{token}} is user content which I can't change.
The problem is that user JS put some HTML code based on my {{token}} value.
So after open page all {{token}} are changed but not inside custom JS cos token was changed after JS was loaded.
How can I replace {{token}} in custom.js query before it loads? It needs to be done in pure JS.
[Updated 1]
I can't move anything from body also can't change. Body is user-provided content.
You need to load your script dynamically. Here is one way to do it by creating script tag and appending it to the page
<!doctype html>
<html lang="en">
<head>
<script>
var script = document.createElement("script")
script.type = "text/javascript";
script.src = "custom.js?token=" + "your_token"
document.getElementsByTagName("head")[0].appendChild(script);
</script>
</head>
<body>
</body>
</html>
I can see the way you are passing {{token}} to custom.js is a hacky way. I can suggest you to change the way it should be like this:
Since main.js is your script, you can try to assign the {{token}} to a global value, example:
Inside main.js:
window.TOKEN = util.protocol() + '://c.' + util.env() + util.domain() + '/' + link_sid`;
In the html will still be the same, except you don't need to add the {{token}} string:
Then inside custom.js, you can use window.TOKEN to do whatever you want with it.
If the window.TOKEN is evaluated asynchronously, you will also need a callback function from main.js to tell custom.js when the token is ready, then it can start using it, example:
When TOKEN have to be asynchronous:
In main.js:
var TOKEN = util.protocol() + '://c.' + util.env() + util.domain() + '/' + link_sid`;
typeof window.tokenReady === 'function' && window.tokenReady(token); // make sure it's a function before calling it
In custom.js:
window.tokenReady = function (token) {
// Do something with token
}
Well, i am new to Ajax and JQuery, I struggled to compile this. I'm trying to load URL with ajax navigation and with popstate retrieving back and front navigations. The below code works well but my problem is integrating the Progress Indicator of the page i'm trying to load when the link is clicked using Pace Page Progress Bar Plugin.
<html>
<head>
<meta charset="utf-8" />
<div id="render-me">
<title>jQuery Ajax Test</title>
<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.gossipper.com/content/css/inspired-mob/styles/pace-theme-center-atom.css" />
<script>
paceOptions = {
ajax: true, // disabled
document: true, // disabled
eventLag: true, // disabled
elements: {
selectors: ['#render-me']
}
};
</script>
<script src="https://www.gossipper.com/content/css/inspired-mob/js/pace.js"></script>
<script type="text/javascript"><!--
$(document).ready(function(e){
$.ajaxSetup ({
cache: false
});
var page;
$('a.lnk').click(function(){
page = $(this).attr('href');
$('#render-me').load(page + ' #render-me');
if(page != location.href){
window.history.pushState({path:page},'',page);
$(window).bind("popstate", function() {
link = location.pathname.replace(/^.*[\\/]/, ""); // get filename only
$('#render-me').load(link + ' #render-me');
});
}
return false;
});
document.addEventListener('gg', function(){
document.querySelector('.pace').classList.remove('pace-inactive');
document.querySelector('.pace').classList.add('pace-active');
document.querySelector('.pace-progress').setAttribute('data-progress-text', percentComplete.value + '%');
document.querySelector('.pace-progress').setAttribute('style', '-webkit-transform: translate3d(' + percentComplete.value + '%, 0px, 0px)');
});
$(window).on({
popstate:function(e){
page = location.href;
$('#render-me').load(page + ' #render-me');
}
});
});
</script>
</head>
<body>
<h1>Web page test.html</h1>
Get extern
<div id="content">Initial content in test.html</div>
</body>
</div>
</html>
As i stated above, am a newbie to Ajax, JQuery and Javascript. I struggled to compile this, i need help getting this to work.
The problem in your code is your script source for pace, css source for pace and the proper placing of html elements.
I tried to go in the sources of your script and css for pace but it is not found.
You don't need to encapsulate all of your element in the <div id="render-me">.
Based from https://www.w3schools.com/html/html_head.asp
The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.
HTML metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, links, scripts, and other meta information.
The following tags describe metadata: <title>, <style>, <meta>, <link>, <script>, and <base>
So you must remove the div in the head, fix the sources and put the <div id="render-me"> inside body.
Here is your code that I fixed: https://jsfiddle.net/uqbysq1a/1/
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
if (window.self === window.top) { $.getScript("Wing.js"); }
</script>
</head>
</html>
Is there a way in C# to modify the above HTML file and convert it into this format:
<html>
<head>
</head>
</html>
Basically my goal is to remove all the JavaScript from the HTML page. I don't know what is be the best way to modify the HTML files. I want to do it programmatically as there are hundreds of files which need to be modified.
It can be done using regex:
Regex rRemScript = new Regex(#"<script[^>]*>[\s\S]*?</script>");
output = rRemScript.Replace(input, "");
May be worth a look: HTML Agility Pack
Edit: specific working code
HtmlAgilityPack.HtmlDocument doc = new HtmlAgilityPack.HtmlDocument();
string sampleHtml =
"<html>" +
"<head>" +
"<script type=\"text/javascript\" src=\"jquery.js\"></script>" +
"<script type=\"text/javascript\">" +
"if (window.self === window.top) { $.getScript(\"Wing.js\"); }" +
"</script>" +
"</head>" +
"</html>";
MemoryStream ms = new MemoryStream(Encoding.ASCII.GetBytes(sampleHtml));
doc.Load(ms);
List<HtmlNode> nodes = new List<HtmlNode>(doc.DocumentNode.Descendants("head"));
int childNodeCount = nodes[0].ChildNodes.Count;
for (int i = 0; i < childNodeCount; i++)
nodes[0].ChildNodes.Remove(0);
Console.WriteLine(doc.DocumentNode.OuterHtml);
I think as others have said, HtmlAgility pack is the best route. I've used this to scrape and remove loads of hard to corner cases. However, if a simple regex is your goal, then maybe you could try <script(.+?)*</script>. This will remove nasty nested javascript as well as normal stuff, i.e the type referred to in the link (Regular Expression for Extracting Script Tags):
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
if (window.self === window.top) { $.getScript("Wing.js"); }
</script>
<script> // nested horror
var s = "<script></script>";
</script>
</head>
</html>
usage:
Regex regxScriptRemoval = new Regex(#"<script(.+?)*</script>");
var newHtml = regxScriptRemoval.Replace(oldHtml, "");
return newHtml; // etc etc
This may seem like a strange solution.
If you don't want to use any third party library to do it and don't need to actually remove the script code, just kind of disable it, you could do this:
html = Regex.Replace(html , #"<script[^>]*>", "<!--");
html = Regex.Replace(html , #"<\/script>", "-->");
This creates an HTML comment out of script tags.
using regex:
string result = Regex.Replace(
input,
#"</?(?i:script|embed|object|frameset|frame|iframe|meta|link|style)(.|\n|\s)*?>",
string.Empty,
RegexOptions.Singleline | RegexOptions.IgnoreCase
);
I want to inject iframe head by yui3.The sample code works in FF but IE9 shows the error "YUI is not define". I don't know what happens in IE9.
<head>
<script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js"></script>
<script src="./test-yui.js"></script>
</head>
<body>
<iframe src="#" id="frame"></iframe>
</body>
var SC = 'script';
YUI().use('node', function (Y) {
var frame = Y.Node.getDOMNode(Y.one('#frame'));
o = frame.contentWindow.document;
o.open().write(
'<head><' + SC + ' type="text/javascript" src="http://yui.yahooapis.com/3.5.0/build``/yui/yui-min.js"></' + SC + '>'+
'<' + SC + '>YUI().use(\'tabview\', \'node\', function(Y) {});</' + SC + '>'+
'</head>'+
'<body><div class="unit_title" >HELLO WORLD</div></body>');
o.close();
});
Trying to write to iframes can be tricky I would suggest looking at the Frame module in YUI some details on using it can be found here http://www.andrewwooldridge.com/blog/2011/04/14/hidden-yui-gem-frame/
parent.html : OnClick="popup();"
1. page opens and displays contents
2. but js function isn't working. js function is defined in js file.
3. i checked using firebug, js file loded successfully.
4. it only works after refreshing the page. Any idea please? what am i making mistake?
js function :
<script>
function popup(){
var test = "<html><head>";
test += "<script src= " + '"'+"jqueryTestfile.js"+'"'+ "> <" + '/' + "script>";
test += "</head><body>";
test += "<div id=" + '"' +"anyId" + '"' + ">";
test += "</div>";
test += "</body></html>";
win.document.write(test);
}
</script>
child pop-up and source code looks like :
<html> <head>
<script src = "jQueryTestFile.js"> </script>
</head> <body> <div id = "anyId">
some content here ...
</div> </body> </html>
I resolved my problem after a no. of attempt and would like to share :
<script type="text/javascript">
window.document.close();
</script>
Why were not js functions working even after downloading the files : because of i was opening (pop up) a new window using window.document.write() and this method was causing the problem so i used window.document.close() to force a page to 'finish loading'.
var h = document.getElementsByTagName('head')[0],
s = document.createElement('script');
s.type = 'text/javascript';
s.onload = function () { document.getElementById('hello').innerText = h.innerText; };
s.src = 'http://html5shiv.googlecode.com/svn/trunk/html5.js';
h.appendChild(s);
see: http://jsbin.com/uhoger