How to add page url to an HTML Element value - javascript

I'm trying to create a page adaptive share button using the page's current URL (since the page varies from our customer to customer numbers). In the following code, there is a "script" and in it the element I need to make use the current pages url, "data-url". Is that possible?
<script type="IN/Share" data-url="thispagesurl" data-counter="top"></script>
Instead of quotes would I use some sort of variable in javascript or aspx? I'm really not sure since I honestly don't know that much about js.

You may need to do something server side.
It's possible to access and modify the script tag: (Assuming yours is the first script tag on the page)
document.getElementsByTagName('script')[0].setAttribute('data-url', window.location.href)
However this most likely won't work as scripts will have already loaded their content

Related

Why does Google Tag manager append at the end of the body?

I am currently trying to implement the Google Tag Manager but I run into a problem since the GTM appends the tags right before the closing tag of the body.
Whenever I have a template that needs to call a bit of code from one of the scripts in the Google Tag Manager I get an undefined error. This is obvious since it does not matter where I place my script in my view, GTM will always come after it since it appends right before the closing body tag.
Is there any way to fix this behaviour and why does Google do it like this? I understand that it helps with non-blocking but they might as well just place async attributes on the scripts and it will almost do the same?
An example I have Facebook Pixel as one of my tags in GTM and I need to be able to make a specific event call when I am loading a certain page as my view.
fbq('track', 'Search');
Ofcourse this needs a fbq instance to begin with. This leave me with only one option and that is to try and place my script in my footer which is a general template and it will get messy.
Any workaround for this behaviour?
The issue you are facing is that the Facebook library is not completely loaded when you are calling your function.
One method would be to migrate your Facebook code to GTM trigger it on all pages
and fire your specific code on dom ready
You could also use the code from below and see when the _fbq.loaded variable is set to true.
https://gist.github.com/chrisjhoughton/1dc91dd7bd95717e08d3
You would have to create trigger based on this javascript variable.
Hope this helps

Reference or find unidentified parent element from within that element

If this question cannot be answered, then I'm going to post a second, "fall back" question.
I have been writing javascript jsonp type apps where the client has to insert a single javascript line into wherever they want the app to show up on the web page. So far it's work out pretty well, but now I want to add one more GET variable to the js src attribute, and that is the present client's page url.
before:
<script id="myScript" type="text/javascript" src="http://www.mydomain.com/scripts/ds.js?cid=00000001&domain=clientdomain.com"></script>
But now for the new twist, I want to add the page url as a GET variable in the src, like so:
<script id="myScript" type="text/javascript" src="http://www.mydomain.com/scripts/ds.js?cid=00000001&domain=clientdomain.com&page="+document.URL></script>
If document.URL is placed between the script tag, I can do it (but that leads me to have to write a slightly larger and less elegant code block). Maybe javascript is not actually allowed in the attribute parameters of the tag, itself.
The usual way to do something like this is to build the tag itself in JavaScript. You can get an added benefit of asynchronous loading (although this can be a problem if you don't know how to handle asynchronous loading properly). For example:
<script>
(function(d){
var f=d.createElement('script'),s=d.getElementsByTagName('script')[0];
f.type='text/javascript';
f.async=true;
f.src='http://www.mydomain.com/scripts/ds.js?cid=00000001&domain=clientdomain.com&page='+encodeURI(document.location.href);
s.parentNode.insertBefore(f,s)
})(document)
</script>
Google Analytics uses similar code so you're in good company. And you're quite right that you can't do this directly inside a HTML tag.

Apart from AJAX and iframe, is there any other way to refresh part of a page?

I'm using a third-party commenting plugin right now, All it provides is a piece of script as follows:
<div id="uyan_frame"></div>
<script type="text/javascript"
id="UYScript"
src="http://v1.uyan.cc/js/iframe.js?UYUserId=1674366" async="">
</script>
As it is not a live commenting plugin, I want to add a refresh button next to it to reload it manually to see the latest comments instead of reloading the whole page.(I know Disqus is a good commenting plugin, but as we target Chinese users, I have to use the current one).
As it's a third party plugin, I don't have too much control over it. And I also think iframe is a ugly way to achieve this partly refreshing thing. So, is there any other way to achieve this? Like every time I click on the refresh button, it will erase out all the HTML element this script generated, recreate this script tag, append it to the appropriate place, and run it again?
you do not have to use iframe as it is slow. What you can do is create a div or section and give it an id or class, then create a button that when is clicked will fetch a script and append the right html contents in the div or section you've created. To make it easier to understand the code would look something like this.
<section id="content"></section>
<button id="refresher"></button>
<script>
$('#refresher').click(function(){
//Load your script like so
$.getScript('url of the script you are trying to get', function(){...})
//Load your content here
$('#content').html('Current contents will be erased and will be replaced by whatever you placed here')
//...or if you need ajax fetching
$.ajax({
url: url,
success: function(){
$('#content').html('place your content here and this will erase old content')
}
});
})
</script>
I would ask 3rd party company how to refresh comments without refreshing the whole page. They did developed this, and they must have a way to refresh it easily.
For example, UYComment.refresh(document.getElementById('comment'))
You may also find this kind of solution by looking at their javascript code if you don't want to ask them.
You can go around by not using 3rd-party provided code, i.e. ajax to replace div, refreshing iframe, etc., but, based on my experience, it always make your code little messier.
Since you tagged jQuery, I'm assuming you're using it.
Try adding a click handler to your refresh button and then use .html()
example:
$('#uyan_frame').html('');
When you call .html, it should replace the element you called it on and it should recall any scripts in the string you pass in. Just as a disclaimer, this is not tested.

Is it possible to use JavaScript in one document to change HTML in another?

For example:
function change()
{
document.getElementById('identification').href = "http://www.stackoverflow.com";
}
The associated HTML (the important bit)
Stack Overflow
<input type=button value="Change" onclick="change()" />
This will change the href in my tag to http://www.stackoverflow.com, but say I wanted to do this from a different HTML file? The JavaScript would be in the tag of the other file, but would edit the content of the first. Is this possible? If so, how?
Javascript lives only for the life of a particular page so you can't have code in one file modify another, as yet unloaded file.
Depending upon what you want the user experience to be, there are some options:
While on the first page, use some javascript to set a cookie and then when the second page loads, read that cookie and have the javascript in the second page adapt based on the cookie value. Cookies can be shared between pages on the same domain.
While on the first page, use some javascript to create a query parameter (those things after the ? in a URL that look like this ?show=true. When you load the second page, request that page by appending the ?show=true (or whatever you make up) to the end of the URL. When the second page loads, it can examine the query parameters on it's URL and decide how to modify itself. This is the simplest way of passing temporary arguments from one page to the next page.
Load the second page into an iframe (embedded into the first page) and when it's loads, your javascript can modify it (if it is served from the same domain as your main page).
Load the second page into your first page, actually inserting it into the original page either appending it or replacing some of your existing content. Then, the first page's javascript can modify the HTML from the second page once it has been inserted.
Open a new window with the new page in it. If it's on the same domain as you, then your javascript can reach into that new page and modify it.
Note: the browser tries to prevent page modifications when the two pages do not have the same origin (e.g. same domain). See a description of the same origin policy. So, if your question pertains to pages on different domains, then you will need to find a different way to solve your problem. Things like add-ons can sometimes get around the same-origin policy, but regular page javascript cannot for numerous security reasons.
Because I can't find a question that I feel matches this one enough to be closed as an exact duplicate, I'll post an answer:
Is it possible to use JavaScript in one document to change HTML in another?
Yes, assuming both windows are within the same security sandbox.
If so, how?
It's quite simple, you need to call the DOM functions from the context of the window you want to access.
a simple way to get a new window object is to call window.open
var newWin = window.open(newpage)
newWin is a window object, and therefor has a document object as well as all the other DOM elements that it may have loaded. Just like any other window, you'll need to wait for document.ready or window.onload if you're trying to interact with the elements being loaded on the page.
newWin.onload = function(){
var ident = newWin.document.getElementById('identification');
ident.href = 'http://stackoverflow.com';
};

Trigger an Event in javascript before objects finish to load

I was trying to write a global JavaScriptfunction which overrides any HTML object (img, iframe, links and so on) before it being loaded by the page. The purpose of the overiding action was to to change the SRC and HREF of these objects using the DOM to any other link.
Unfortunately I didn't find any solution to that without firstly loading the object and only then changing it by the onload event.
My second option was to change the SRC and HREF by matching these attributes with a regular expression and replacing the resultant values. I prefer not to do so because it's slow and consumes a lot of time.
I would be glad if someone can share with his/her experience and help me solve this out.
JavaScript only works within the DOM.
You could however, load the page via AJAX, get the content and do any string manipulation on it.
If you are trying to modify items that exist in the static HTML of the page, you cannot modify them with javascript until they are successfully loaded by the browser. There is no way to modify them before that. They may or may not be visible to the viewer before you have a chance to modify them.
To solve this issue, there are a couple of options.
Put CSS style rules in the page that causes all items that you want to modify to initially be hidden and then your javascript can modify them and then show them so they will not be seen before your modification.
Don't put the items that you want to modify in the static part of your HTML page. You can either create them programmatically with javascript and insert them into the page or you can load them via ajax, modify them after loading them via ajax and then insert them into the page.
For both of these scenarios, you will have to devise a fallback plan if javascript is not enabled.

Categories