I've been given some great tips on how to inject HTML into HTML that I can't edit.
The trouble is now that the snippet contains JS it won't render to the page.
The Jquery looks lke this:
$(document).ready(function() {
var $body = $(document.body);
if ($body.is(".ly_productdetails.ProductDetails.en.en_GB")) {
$('.info_section').prepend('<div id="test-widget"></div><script type="text/javascript" src="/frontend/latest/build.min.js" data-test="test-widget" data-instance="xyz" data-apikey="12345678" data-tags="" async="async"></script>');
}
});
I tried putting backslashes in before the quotations but this didn't work.
How else can you write this to the page so that the JS is included?
Many thanks,
Adam
JSfiddle : https://jsfiddle.net/fs6qgzrj/
This is a security feature. jQuery allows <script> elements in HTML code but it won't execute them (at least not the src="..." part; inline scripts work). This is because jQuery has no way to make sure the script isn't malicious or from a safe source (an error in your code might allow people to enter scripts in a form element).
Use jQuery.getScript(url, successCallack) instead.
See also: jQuery - script tags in the HTML are parsed out by jQuery and not executed
It looks like jQuery won't load an external script when parsing HTML. But if you create a script element it will:
$('body').prepend($('<script>', {
src: 'http://dev.bridgebase.com/barmar_test/test.js'
}));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Related
Current variant looks like that (I tried solution offered here: Can't append <script> element):
var s=document.createElement("script");
s.type="text/javascript";
s.src="js/properties.js";
$("head").append(s);
Previous variant was:
$("head").append($('<script type="text/javascript" src="js/properties.js"></script>'));
And both of them don't work. "properties.js" is also in "js" folder, but if I remove this part of path, it doesn't change anything.
I also tried to use ' instead " and check addBlock: I had it installed, but it's disabled on this page.
Changing "append" function to "appendChild" also didn't help.
"properties.js" contains just one line:
var PREFIX_URL = "http://localhost:8080/app-rest-1.0.0-SNAPSHOT";
And firstly I declare it in "main.js" to which I, in fact, try to connect this file.
Explain, please, what I'm doing wrong.
Add all your <script> tags right before the closing </body> tag, because when the browser encounters a <script> tag it begins downloading it and stops rendering of the page. So by placing them at the bottom of the page you make sure your page is fully loaded before trying to interact with the DOM elements. Also $("head") returns an array of all the <head> tags. You should also enclose your calls in a $(document).ready() function.
<!-- Your html tags here -->
<script type="text/javascript">
$(document).ready(function(){
var s=document.createElement("script");
s.type="text/javascript";
s.src="js/properties.js";
$("head")[0].append(s);
});
</script>
</body>
I made JSBin example. You can see in console that last script tag is the one you need. So the your code is correct.
If your IDE don't highlight 'var' - it may be error not in javascript. You can place it in a wrong place for example.
Can you provide link to a gist (or pastie.org or smth) for us to better understand your problem.
P.S. The code $("head")[0].append gives me undefined ( note to previous answer)
i am using CsQuery library for crawling. Code is like this.
var dom = CQ.CreateDocument(htmlContent);
resultText= dom[cssSelector].Text();
I don't want script tags in resultText for example this part <script> somethings </script>
I tried this dom[cssSelector].Not("script").Text(); . But is not working.
How can i delete all script values?
The library hasn't been updated in over three years, so it is possible that it no longer works.
Looking at the given documentation, you can try using:
CQ script = dom["script"];
script.remove();
This will remove all script tags
Solved. This code removes all scripts.
dom = dom["body script"].Remove();
I am in the process of making an addon for a software that basically allows you to have 'responsive' adverts, by checking the page size with javascript and then outputting the relevant ad code to the screen.
This works fine for text ad codes, however I've hit a snag when the ad code is javascript - I can't get the user-provided javascript to output to the page and be executed.
Is this possible at all?
Here is some example code:
<div id="admanagerresponsive">
<script type="text/javascript">
adUnit = document.getElementById("admanagerresponsive");
adWidth = adUnit.offsetWidth;
if (adWidth >= 728) {
<output ad code>
}
</script>
</div>
The code above will be directly in the page.
Is such a thing possible?
EDIT:
could be any advertiser's code, such as adsense. It'll be user provided, and will be standard html. However, it could contain tags, and these will need to be rendered and outputted correctly...
If you really need to inject add html code containing script tags and you are award of the security problems, i suggest to use a library like jQuery that takes care about the cross browser issues with executing <script> tags added later.
Additionally you need to take care about various pitfalls like:
Html paring is done before script parsing, so no matter where a </script> appears this will immediately end your script.
The examples are important for the situations where you have that code as inline script inside your html page.
Example 1:
<script>
adUnit = document.getElementById("admanagerresponsive");
adWidth = adUnit.offsetWidth;if (adWidth >= 728) {
// if you add </script> <b>this is visible as html</b> and everything below is not script anymore
}
</script>
Example 2:
<script>
adUnit = document.getElementById("admanagerresponsive");
adWidth = adUnit.offsetWidth;if (adWidth >= 728) {
var string = "<script> var test;</script>";//the same problem here everything behind the closing script tag is html and not script anymore
}
</script>
So if you need to have some script to inject there you need to make the </script> not to be detectable by the html parser:
<script>
adUnit = document.getElementById("admanagerresponsive");
adWidth = adUnit.offsetWidth;if (adWidth >= 728) {
var string = "<script> var test;</sc"+"ript>";//that way the html parser does not detect the closing script tag
}
</script>
A better solution is not to use inline script at all, not only for that reason, but because you should always keep css, js and html separated.
Break it into two ideas. From your HTML above, just call a js function you wrote somewhere else. Initially have that js function be an alert, to verify that works.
Once that works, you have the problem: how can I get custom js for a page? The answer to that is hopefully that you can create and load a (one-off, custom) js file the same way you create an html file. Or, libraries such as now.js could help. Or, there is a script portion of your html page that you understand how to assemble to include the js.
You could even preload all your size possibilities, then have the js routine from the first paragraph pick the right routine to call,
I'm trying to follow the tutorial to use jQuery UI plugin. I'm new to JavaScript and I'm not sure where to put a particular bit of code.
I've got everything I need downloaded. I've put the files where they need to be and included them in the like I'm supposed to - all no problems there. But next I get a little stuck due to my utter noobieness.
It says I give an ID to the element I want to use e.g. id="date" and call:
$('#date').datepicker();
on it.
Where do I put the above code? Along with the html and php? Or in the Javascript file I've included?
First load your jQuery library:
<script src="/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>
Then load your jQuery UI library:
<script src="/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
Then, load your code with something like:
<script type="text/javascript">
$(document).ready(function() {
$('#date').datepicker();
});
</script>
Put it within a script tag like :
<script type="text/javascript">
$(function(){
$('#date').datepicker();
})
</script>
You will usually execute jQuery-code on $(document).ready(), but there are cases where you don't. Maybe this gets you started: http://docs.jquery.com/How_jQuery_Works
In your HTML/PHP code between script tags. Mostly in the head section or at the bottom just infront of the end body tag.
your code would look like this: ...
<script type="text/javascript">
$(document).ready(function() {
$('#date').datepicker();
});
</script>
the code you are trying to use is Javascript, so it normally goes into a .js file, or into a script type="javascript" tag of your resulting html. As it uses the jQuery $ function, you need to have the jQuery Library included before calling the code you have in your question. The code itself is best placed into the document.ready function that jQuery provides, so it will be called only when all the neccessary libraries are loaded and the html Dom tree has been constructed.
$(document).ready(function() {
$('#date').datepicker();
});
You have to put that code inside the javascript file such that the input text box element is already append to DOM.For example,
var input = document.createElement('input');
input.type = 'text';
input.id = 'date';
document.body.appendChild(input);(or)[If div to append then div.appendChild(input);
$('#date').datepicker();
Here,the input element is appended to body or the parent div.Then the datepicker() can be rendered
I want to create a javascript badge that displays a list of links. We host the javascript on our domain. Other sites can put an empty div tag on their page and at the bottom a reference to our javascript that would render the content in the div tag. How do you implement something like this?
I would give the SCRIPT tag an ID and replace the script tag itself with the DIV + contents, making it so they only have to include one line of code. Something along the lines of the following:
<script id="my-script" src="http://example.com/my-script.js"></script>
In your script, you can swap out the SCRIPT tag for your DIV in one fell swoop, like so:
var scriptTag, myDiv;
scriptTag = document.getElementById('my-script');
myDiv = document.createElement('DIV');
myDiv.innerHTML = '<p>Wow, cool!</p>';
scriptTag.parentNode.replaceChild(myDiv, scriptTag);
just as you say, have them put a div at the bottom of their page:
<div id="mywidget"></div>
then have them link to your javascript:
<script type="text/javascript" src="http://yourdomain.com/mywidget.js"></script>
then have them alter their body tag, or onload to call your script
<script type="text/javascript">
document.body.onload = loadYourWidget();
</script>
You do not necessary need an initial div to fill with you link list.
Simply create the div using document.write at the place where the script is placed.
<script type="text/javascript" src="http://domain.com/badge.js"></script>
... and in your script:
var links = [
'One',
'Two',
'Three'
];
document.write("<div>" + links.join(", ") + "</div>");
Another benefit is that you do not have to wait for the page to be fully loaded.
Like #Owen said, except why not craft your javascript so that
<script type="text/javascript" src="http://yourdomain.com/mywidget.js"></script>
does the work of populating <div id="mywidget"></div> on its own, thus negating the need for them to call loadYourWidget() from their DOM load if you include the script tag right after the mywidget div in the html source. This isn't really a best practice, but I think it'll work.
Example for your mywidget.js code:
document.getElementById('mywidget').innerHTML = "<a href=''>LinkOne</a> <a href=''>LinkTwo</a>";
It took me some time to find this answer on Stackexchange because I was using different search terms. I believe that the link suggested there is a more complete answer than the ones already given here:
How to build a web widget (using jQuery)
It covers:
ensure the widget’s code doesn’t accidentally mess up with the rest of the page,
dynamically load external CSS and JavaScript files,
bypass browsers’ single-origin policy using JSONP.