I'm looking to do a short term hack on a site. The site is a ASP.NET site with a master page. The body tag is in the master page. I'd like to specify which ID should be in the body tag from within various content pages. What I don't know is if you can have this type of access to the body tag when your JS is within the body tag. For various reasons, I'd like to try to accomplish this in JS, not .NET.
Any tips?
Rephrasing for clarity:
I would like to use JavaScript to specify a body ID from within the body tag of a site. For example:
<body id="MyID">
JS to change MyID to another name
</body>
Put this in the Page_Load of any ContentPage...
string JS = "document.body.id = 'WhateverID';";
ClientScript.RegisterStartupScript(this.GetType(), "BodyID", JS, true);
Related
I am fairly new to GTM. I need to put this script to our Shopify product pages. It is for an email marketing automation saas.
If I put it directly into the code of the page in Shopify, it renders well and comes back with a product id that is fished from the liquid code above. It looks like this:
<script type="text/javascript">
Targito.push( 'event', 'product_view', { 'id' : '{{ product.selected_or_first_available_variant.id }}' } );
</script>
But when I want to put it into Google Tag Manager, as custom HTML tag, and then add the variable into variables in GTM, after I publish it, on the page, in inspect tool and elements, it comes back as this:
<script type="text/javascript" id="">Targito.push("event","product_view",{id:"{{undefined}}"});</script>
I need to see a product id of the page you are currently viewing.
The thing is, Shopify liquid variables are also defined with double curly brackets, so are GTM variables. Would anyone be able to help me please? Highly appreciate your tips in advance.
You can't put liquid code inside your tag. The tag is rendered in Javascript that is on client side. Liquid is rendered on server side. You will need to populate a variable with liquid and use that in your tag. There are other ways but the fastest is doing something this.
You put this in your .liquid template (somewhere at the beginning of the page)
<script>
window.myVariantId = '{{ product.selected_or_first_available_variant.id }}';
</script>
And then in your tag you can put
<script type="text/javascript">
Targito.push( 'event', 'product_view', { 'id' : myVariantId } );
</script>
I’m “developing” a web site from Sharetribe (this is a website to create marketplaces). Sharetribe limited the “freedom” of a developer. We can add anything to the <head> of the website. So in the <head> I can change the CSS of the website, and this is great because I can change the appearance of the website.
What I’d like to do is to add HTML tags, like buttons, divs, etc. If I can do that, it would be great.
I believe this can’t be done, but first, I’d like to question — who knows, maybe I’m wrong.
It's a bit hacky, but you can use javascript to "insert" or "append" html to the body of the webpage through the head.
If you only have access to the head element, but not to the body, then you could try to use Javascript to add elements into the body. This only works if script tags are allowed and it has to be said that it is not really a good way of coding. But if it is the only way...
My idea (to make it a bit easier) : Include jQuery and add elements to the body by using the append function. So: you go to the jQuery downloads page, download the file and include it in the head tag. Now, you can access the body tag and insert some custom code like this:
$("body").append('<h1>Hi! I am a headline</h1>');
Pure JavaScript way:
var sibling = document.querySelector('.sibling');
var newSibling = document.createElement('div');
newSibling.className = 'sibling';
newSibling.innerHTML = 'Appended before the below div';
document.body.insertBefore(newSibling, sibling);
<body>
<!-- Already Existing HTML -->
<div class="sibling">I wish I had a sibling</div>
</body>
Quick jQuery way:
Include jQuery inside your head. Include the custom jQuery code inside <script></script> within <head>.
$(document).ready(function() {
$('.sibling').append('<div class="sibling">Hey! I am here</div>');
$('.child').wrap('<div class="child">You are not orphan anymore!</div>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<!-- Already Existing HTML -->
<div class="child">I wish I had a parent</div>
<div class="sibling">I wish I had a sibling</div>
</body>
I want to load a html file with it's own stlyesheet and js into a div of another page.
For example the html file i want to load will be something like this
<html><head>External syle and js</head><body></body></html>
into the div tag of other html page using
$("#divID").load("htmlpagename.html");
When ever I'm loading html it's losing css and I'm thrown with an error in console as
GET http://localhost:81/projects/js/table.js?_=1377245019877
jquery.min.js (line 6) 404 Not Found 149ms
If you want to keep the whole content of the page loaded, you'll need to use an iframe instead.
Information taken from the jQuery .load() documentation:
jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as html, title or head elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.
If you decide to use an iframe, this can help you:
$("<iframe />").attr("src", "htmlpagename.html").appendTo("#divID");
You can use iframe in html, so why don't you use iframe?
<html>
<head>
<!-- Other Head Files and Tags Here -->
</head>
<body>
<div id="divID">
<iframe src="htmlpagename.html"></iframe>
</div>
</body>
</html>
Try this :
$('<iframe />').attr('src', 'htmlpagename.html').appendTo('#divID');
fiddle
How do i write a Jsp page which opens JSbox.
main vulnerabilities that apply to this eg.
I'm just going to worry about the cross-site-scripting problems caused by HTML and JS injection. CSRF doesn't seem to be an issue yet because just alerting “hello” doesn't have any active side-effects that you would have to be logged in to do.
The bonehead way of doing it:
<script type="text/javascript">
alert('Hello, <%= request.getParameter("name") %>');
</script>
This suffers from JS injection because there is no JS-escaping inside a JS string literal:
name=');execute_arbitrary_code();'
and also suffers HTML injection because the enclosing script block can be closed early:
name=</script><script>execute_arbitrary_code();//
Unfortunately there is no standard tag in JSP that will escape text in a JS string literal (that is itself in an HTML script block). You can write and use your own tag to do it, or reuse a library that defines one. For example OWASP ESAPI has:
<script type="text/javascript">
alert('Hello, <esapi:encodeForJavaScript>${param.name}</esapi:encodeForJavaScript>');
</script>
But it is often easier to avoid encoding into JS, and instead push data through the DOM. Because the DOM is plain HTML, you only need normal markup escaping, which JSP has natively in the <c:out> tag.
<input type="hidden" id="name-parameter" value="<c:out value="${param.name}"/>"/>
<script type="text/javascript">
var name = document.getElementById('name-parameter').value;
alert('Hello, '+name);
</script>
This aids in the long-term goal of keeping your JS separate from your markup and server-side code. data- attributes are another good way to pass data from markup to JS.
I am trying to add an iframe to my website. The problem is that our CMS automatically overrides the src address given ex: I set the absolute url (source address) to http://www.youtube.com/embed/RE6C1AoWy3M and when the page is rendered the src is modified as shown.
The base address is being added. This was set as we normaly upload images/files on our file system.
Any idea how can I override this, maybe embed some javascript function. I do not have access to .cs/ Asp.net pages.
You can create an inline script that will render the iframe during the page load.
Example:
<html>
<head>
<title>example</title>
</head>
<body>
<!-- Your normal HTML/text here -->
<!-- add the script where you wanted the iframe to be -->
<script type='text/javascript'>
document.write("<iframe src='http://www.youtube.com/embed/RE6C1AoWy3M'></iframe>");
</script>
<!-- Your remaining HTML/text here -->
</body>
</html>
This has finally worked. I am creating the iFrame as shown below not using the CMS drag/drop html objects and modify the src attribute.
var el = document.createElement("iframe");
el.setAttribute('id', 'ifrm');
// Here I am getting the object to append the iframe to
var elem = document.getElementById("td1");
// Append iframe to this element.
elem.appendChild(el);
el.setAttribute('src', 'http://www.youtube.com/embed/RE6C1AoWy3M');
</script>
Although this solved my problem, I am open to new maybe better suggestions. I am willing to learn from other's experience.