javascript showing as plain text - javascript

I'm using featherlight to call a file with ajax. It only consists of:
<script>
alert();
</script>
The scripts runs, I see the alert but it also renders it in plain text:
alert();
I can't figure out why.

Digging into it, featherlight adds a featherlight-inner class to every element of "first level" that it finds on the page.
So solution is to put the script tag into the main tag.

If you want to execute something when it opens, use afterOpen.

Related

Render Script into HTML without Executing it

<html>
<p> Some html </p>
<script> some script </script>
</html>
How to identify the script tag and render them as content.
I have a div dedicated to display a html in my webpage, and if it has any script I want to render them as content, but while appending the html to the div, the script gets executed which I dont want to happen. How to keep the script from executing, are there any libraries to do that.
Note:
1. The Inline script should also be prevent from executed.
2. The Html Content getting appended is dynamic and got from email listener source
Thanks in Advance!
but while appending the html to the div, the script gets executed which I dont want to happen. How to keep the script from executing, are there any libraries to do that.
Since you say you already have the div content and as soon as you append it the script gets executed, This is a default behavior, What we can do is before appending the div content of yours we can modify the content string to replace <script> and </script> by <script> and </script>. So here is the demo of it.
var divContent = '<script>alert("I must not execute!!");<\/script>';
var res = divContent.replace(/<script/g,"<script>").replace(/<\/script/g,"</script>");
document.getElementById("output").innerHTML = res;
<div id="output">
</div>
Use the document.ready(); method. This will only run your JavaScript once all the HTML elements have rendered. Better yet, wrap your function within the jQuery shorthand:
$(function() {
alert( "DOM elements rendered!" );
});
You can try to use jQuery document.ready(); function to only allow the script to execute when the page has loaded.

tinyMCE setContent strips closing p-tag

i want to put the content from a database field to the tinyMCE editor on page load. For that i've got a php function like this:
public function __loadTinyMCE($jobscopeIntroText) {
print '
<script type="text/javascript">
function loadDefaultTinyMCEContent(){
tinyMCE.activeEditor.setContent("'.$jobscopeIntroText.'", {format : "raw"});
}
</script>
';
$jobscopeIntroText is the html content i previously wrote into the tinyMCE editor and comes from the database.
When i write e.g.:
<p>Hello< /p>< p>This is a new line< /p>
it doesnt work and the html code in setContent() is broken after the first closing p-tag. In chrome developer tools the text before the first closing p-tag is red and after that it's black. Even if there are no " or ' within the html.
With only one closing p-tag it works.
Anyone knows the problem here?
I think you should use this code once all contents will be loaded. Therefore there can be ways to achieve desire result:
You can place your database value within editor element and then
initialize tinyMCE editor. (if page is loading)
You can above function just before the before the body tag ends.
You can use document load event or jQuery document.ready() function and just function within it.
I hope this will work for you. Please do let me know for specific scenario.

Why this pop up is not shown?

I have a problem with a very simple JavaScript pop-up script.
I have this example page: http://www.onofri.org/example/example4/
At the end of this page there is a box containing some flags including the British flag that is reprsented by the #reportEng div (inside the engLink link).
What I want is that when the user clicks on this element a pop0up message will show.
So I have add to the page this simple script:
<script>
var test = document.getElementById('engLink');
test.addEventListener('click', function() {
alert('clicked');
});
</script>
I have put the script inside the body section of the page and not in the head section because this is only a test page and the final result will be put into a page of a CMS in which I do not have access to the template (so I can't put the script in the head section).
The problem is that it does not work. If I click on the English flag the page is reloaded and the pop-up not shown.
Can you help me?
Thank you,
Andrea
I went a completely different approach. The addEventListener is pretty cool, but I'm a bit OLD and I've defaulted to nasty habits. This works just fine for me.
<script>
function myExample(){
alert("BaZing! It works!");
}
</script>
And for the HTML part...
<div id="reportEng" onClick="myExample()"></div>
I also want to point out that this 'fix' is a bit taboo (see here)
You don't prevent the link from being followed, so when you click the link which has an empty href, you simply reload the current page.
There are many ways to prevent the defaul link behaviour, but here is the old school way:
<div id="reportEng"></div>
Also on a side note I don't think a div element is allowed inside an a in HTML or XHTML.
FIDDLE
You are using a <a> tag, change it to use a <div> tag, or remove <a> tag at all
You can follow this to make div clickable.

How can I turn this click event function into one that is called automatically when the div loads?

I perform a function which loads content into a div. I am using innerHTML, I GET a php file, which updates the innerHTML of the div with the php file's content.
This div contains another div inside it with the class and id of "tweet". This div is updated with actual tweets of a specific hashtag, passed to the function through a $variable
It works fine when it is simply an onclick event, such as this:
<p>activity</p>
<div class="tweet" id="tweet"></div>
However, what I want to do is have it automatically load tweet('') once the "tweet" div has loaded.
The tweet(hashtag) function is:
function tweet(hashtag) { $("#tweet").load('tweet.php?hashtag='+hashtag); }
which loads a php file that calls the jquery tweet function.
jQuery(function($){
$(".tweet").tweet({
avatar_size: 32,
count: 3,
query: "<?echo $hashtag;?>",
loading_text: "loading tweets...",
refresh_interval: 3
});
});
Based on the hashtag passed, it shows 3 tweets.
The hashtag is called when the page is loaded, as a session variable.
It all works fine when I click the link. What do I need to do to have this load automatically. so that I don't need to click the link? I have tried a number of autorefresh options but couldn't quite get it. I would really appreciate assistance.
I know that, if this was just a regular page being loaded, I can simply use $(document).ready and call the jquery function. However, due to the way the div is populated with the new php file contents, it doesn't work. I have tried a few times using autorefresh intervals, window onload, etc. They don't seem to work either.
There are two ways to try this:
Run the code somehow from the function which you call to load the div. (Guaranteed to work. You may even put together some kind of plugin concept. "eval" may be useful.)
Add a tag after the div. If things work as you hope, that code will execute immediately.

Running the javascript code present on another html page through jquery

It might be a noob questions but I have just started using jquery.
My basic requirement to extract the link which is there in the javascript code present in another html (code is embedded in the html page and not in a seperate file).
The link is also present as a href attribute of <a> tag inside a tag, just to add if it is easier to extract it from there (I am using chrome so I think it considers there are no child nodes of <noscript> tag)
After this I tried doing an ajax request to the html page (using $.ajax) thinking it will run the scripts on the page but got the html code of the page in return :S . I have also heard of something called evalscripts:true but not sure if that will work here or how to use it?
I have also tried to search for the link in html code returned by my html page by using the "contains" operation of jquery.
I am doing all this to create a greasemonkey script. Please suggest
Example Code:
This is a function present inside the html of that page:
function fun() {
obj = new pollingObj('argument', "a link I want to extract comes here");
}
I want to extract the link: "a link I want to extract comes here" and then open it.on my page where I am running my jquery script
This link is also present like this on the html page:
<noscript>
blabla
</noscript>
Also is it possible to run the javascripts present on that page if the link extraction is not possible?
If you're able to get the html code of the page successfully via .ajax, and the data you want is in the HTML code, it's not worth the effort to bother with trying to run the scripts. Just access the URL through the DOM:
// ajax success function
success: function(html) {
var anchorCode = $(html)
// this assumes that noscript is a top-level element
// otherwise, use .find('noscript')
.filter('noscript')
.text(); // get the code for the anchor tag, as a string
var myLink = $(anchorCode).attr('href');
// do something with myLink
}
Edit: It turns out that jQuery is a little funny in the way it deals with noscript tags - inner tags don't appear to be considered part of the DOM, so you need to grab the text content of the tag and then use jQuery to DOM-ify it. See updated code above.

Categories

Resources