I have a Google Analytics account and I need to use the new asynchronous snippet in my blogger blog. According to documentation, I should insert GA <script> tag to the bottom of the <head> section.
In my blogger html template, the <body> section ends with this:
</div>
</div>
<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>
<b:include data='blog' name='google-analytics'/>
</body>
So this is the old snippet and should be disabled, yes?
Well, I commented the line <b:include data='blog' name='google-analytics'/> and scrolled up to the <head> section. It ends like this:
#layout .region-inner {
min-width: 0;
width: auto;
}
]]>
</b:template-skin>
</head>
So I inserted the Google Analytics <script> tag just before the </head>. But it doesn't upload and it says that I have an error.
So, how to do it?
Well, the answer to my question is that the error I was getting yesterday has not occurred today, when I made a test one more time. So basically there is no issue at all: either deleting or commenting the old GA snippet should work.
Related
There is a Single Page App with Facebook Pixel integrated via Google Tag Manager as Custom HTML tag.
<script>
(function() {
fbq({{Facebook Pixel Track Type}}, {{Facebook Pixel Event Name}});
})()
</script>
This tag is firing on every history change. And on every history change new
<script type="text/javascript" id="">fbq(google_tag_manager["GTM-XXXXXXX"].macro('gtm22'),google_tag_manager["GTM-XXXXXXX"].macro('gtm23'));</script>
is inserted into the DOM.
multiple script tags added to the page
The only way I found just remove executed script tags.
<script id='facebook-pixel-hit'>
(function() {
fbq({{Facebook Pixel Track Type}}, {{Facebook Pixel Event Name}});
setTimeout(function() {
var scriptTag = document.getElementById('facebook-pixel-hit')
if (scriptTag)
scriptTag.remove()
}, 500);
})()
</script>
but it doesn't look like a good solution.
Are there any ways to avoid adding multiple tags into the DOM?
I have a database in firebase and I want to make it public like https://publicdata-transit.firebaseio.com/sf-muni
What I see here they have a prefix "pulicdata", How do I get it?
A publicly accessible read-only dashboard, like the one you're referring to, is only available for apps managed by Firebase themselves. You cannot enable it on your own applications.
This won't do any formatting (you can make it pretty if you want), but this will take your snapshot and just put it up on the screen for anyone to see as long as you have your settings for read as true.
<html>
<head>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
</head>
<body>
<div id='displaySnapshotDiv'></div>
<script>
var myDataRef = new Firebase('https://MY-FIREBASE-NAME-GOES-HERE.firebaseio.com/');
myDataRef.on('value', function(snapshot) {
displaySnapshot(snapshot.val());
});
function displaySnapshot(snapshot) {
$('<div/>').text(JSON.stringify(snapshot)).appendTo($('#displaySnapshotDiv'));
$('#displaySnapshotDiv')[0].scrollTop = $('#displaySnapshotDiv')[0].scrollHeight;
};
</script>
</body>
</html>
If you want it to be a little more readable, you could do something like:
<!-- language: lang-html -->
<html>
<head>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
</head>
<body>
<div id='displaySnapshotDiv'></div>
<script>
var myDataRef = new Firebase('https://MY-FIREBASE-NAME-GOES-HERE.firebaseio.com/');
myDataRef.on('child_added', function(snapshot) {
displaySnapshotNeatly(snapshot.val());
});
function displaySnapshotNeatly(snapshot) {
$('<div/>').text(JSON.stringify(snapshot)).appendTo($('#displaySnapshotDiv'));
};
</script>
</body>
</html>
Here is the second one working in JSFiddle: https://jsfiddle.net/lukeschlangen/rzfn45pz/
And here is the second one with your firebase data (please tell me the security settings for writing are set to something other than true?): https://jsfiddle.net/lukeschlangen/rzfn45pz/2/
It seems like you might want to do some formatting, but this is displaying all of the data.
The data can be available public if you change your database rules to true or use the auth token for authentication. But since you do not want to authenticate access, all you simply need to do is Make you access rules public
for more information check out: https://firebase.google.com/docs/reference/rest/database/
enter image description here
Well, I'm trying to dart back and forth around the internet, in a fashion similar to this: http://jsfiddle.net/Muimi/gm7gv/. Unfortunately, my code doesn't work. What is happening is that the page isn't redirecting at all. I noticed that it gave me errors like 'page does not exist', for google.com (which exists, just so everyone knows). So, any ideas?
<!DOCTYPE html>
<html>
<head>
<style>
#showUrl {
border:2px solid #0A9;
height:90%;
width:95%;
}
#url {
width:30em;
}
</style>
<script type="text/javascript">
function loadUrl() {
var url = document.getElementById( 'url' ).value;
var showUrl = document.getElementById( 'showUrl' );
showUrl.src = url;
}
</script>
</head>
<body>
<form>
Enter URL to load: <input type="text" id="url" />
<input type="button" value="Load URL" onclick="loadUrl()" />
</form>
<iframe id="showUrl"></iframe>
</body>
</html>
Are you including 'http://'? If not, the iframe is trying to load a relative path instead of an absolute path.
function loadUrl() {
var url = document.getElementById( 'url' ).value,
showUrl = document.getElementById( 'showUrl' );
showUrl.src = /$https?:\/\//.test(url) ? url : 'http://'+url;
}
Your code does works. I tried it on JsBin and it did work with my website's URL but didn't with Google's
http://jsbin.com/akugeg/1/edit
There can be three reasons:
You need to add a protocol so it works as an absolute URL not a
relative one.
Most code debugging services doesn't allow to load iframes, as it itself uses iframe to display the content - for security reasons.
Some websites don't like to be loaded in iframes so they just configure their servers to not to load other inside an iframe on other than their own domain.
But I can assure you that the code works and if you try it on your localhost it might work.
Example
-- begin: index.html --
<!doctype html>
<html>
<head>
<title>Index</title>
<script type="text/javascript" src="mootools.js"></script>
</head>
<body>
<iframe src="iframe.html" id="innerFrame">blah</iframe>
</body>
</html>
-- end: index.html --
-- begin: iframe.html --
<!doctype html>
<html>
<head>
<title>iFrame</title>
</head>
<body>
<form>
<input id="inputField" type="text" value="this is text." />
</form>
<script type="text/javascript">
$('inputField').set('value', 'updated text');
</script>
</body>
</html>
-- end: iframe.html --
Currently, $('inputField').set('value', 'updated text'); doesn't work :-\
Yes, assuming the iframe and it's parent window are on the same domain, it is possible to load the Mootools scripts once in the parent, and then programmatically extend the IFrame's window and document, instead of re-loading the script within the iframe. It is not the default behavior, as you've noticed, and probably for good reason - I'm guessing most people will tell you it's more trouble than it's worth.
In fact, the IFrame shortcut element constructor used to do that exact thing, but it was ultimately considered to be too much of a hack and not worth the effort to maintain as part of the framework long-term, so they dropped it - this why the documentation for IFrame is kind of odd ("IFrame Method: constructor, Creates an IFrame HTML Element and extends its window and document with MooTools.", and then right below after the example, "Notes: An IFrame's window and document will not be extended with MooTools methods.").
So, the most straightforward way to have $(..) useable in your iframe is just to have the iframe include the Mootools script. If you're feeling fancy, you could also have your parent window inject the Mootools script into the iframe's HEAD, for example:
index.html
<html>
<head>
<title>Parent</title>
<script type="text/javascript" src="mootools.js"></script>
</head>
<body>
<iframe id="innerFrame"></iframe>
<script type="text/javascript">
var mooFrame = new IFrame("innerFrame", {
src:"iframe.html",
events: {
load: function(){
var mooEl = new Element('script', {
type: 'text/javascript',
src: "mootools.js",
events: {
load: function(){
//passed to mooFrame by the iframe
this.pageReady();
}.bind(this)
}
});
this.contentDocument.head.appendChild(mooEl);
}
}
});
</script>
</body>
</html>
iframe.html
<html>
<head>
<title>Iframe</title>
</head>
<body>
<div id="iframe_element"></div>
<script type="text/javascript">
parent.mooFrame.pageReady = function(){
/* Put your iframe javascript in here */
$('iframe_element').set("text", "Fancy!");
};
</script>
</body>
</html>
Update (July 29th): I was fooling around with this idea again and realized there's a fairly obvious though pretty ham-fisted way to transfer Mootools functionality defined in the parent index.html window to the inner iframe: simply include the entire Mootools source into the parent window (remove the src attribute from the existing script element and add an id), and copy that newly enormous element's text into the new script node that gets injected into the head of the iframe. Inlining the Mootools code in the script element in this fashion gives you access to the contents of the element, which you don't get when the javascript is loaded from an external file via the src attribute.
Of course, this..concept is only relevant if the parent window and iframe are on the same-domain, (same as the code provided above).
The obvious drawback is that the Mootools source isn't cached. I'm not sure if there's a use-case where this method would be more optimal than just including mootools in both parent and iframe. In any event, change the index.html file to this:
<html>
<head>
<title>Parent</title>
<script type="text/javascript" id="mootools_js">
**COPY-PASTE THE CONTENTS OF mootools-core.js HERE**
</script>
</head>
<body>
<iframe id="innerFrame"></iframe>
<script type="text/javascript">
var mooFrame = new IFrame("innerFrame", {
src:"iframe.html",
events: {
load: function(){
var mooEl = new Element('script', {
id: 'mootools_iframe_core',
type: 'text/javascript',
html: $('mootools_js').innerHTML
});
this.contentDocument.head.appendChild(mooEl);
this.pageReady();
}
}
});
</script>
</body>
</html>
My previous answer offered two alternative ways of doing the task in question ("load Mootools in a parent frame and then re-use it in iframes"). The first method didn't "re-use" the Mootools functionality loaded into the parent frame, but was rather an alternative way to load the script in the inner iframe. The second method was just a hacky way of copying over the script by putting the entire mootools core source inline in a script element and then copying that element's content into a script element in the iframe's head (hardly optimal).
This following method does programatically extend the window and document objects of the inner iframe. Again, it is assumed that both the parent page and the iframe are on the same domain.
In my (brief and simple) testing, loading the source in both parent and iframe resulted in 72.1 KB transferred at around 130ms (to finish loading both the parent and iframe pages), while the page that loaded the source and then extended the iframe was 36.8 KB and took around 85ms to load both parent and iframe. (that's with gzip on the server...file size of uncompressed/unminified core source is around 134 kb).
For this method a few trivial additions/edits are made to the mootools core source. Download an uncompressed version of mootools-core-1.3.2.js, and rename it to 'mootools-core-init.js' (or whatever). The following steps assume that you checked all boxes on the core builder page except 'Include Compatibility'.
Add this to the top of the 'mootools-core-init.js' file (above the first self-calling anonymous function):
var initMootoolsCore = function(){
var window = this;
var document = this.document;
Add this to the very bottom of the core js file:
};
initMootoolsCore.call(window);
Do the following find/replace tasks:
1
Find:})();
Replace: }).call(this);
2
Find: if (Browser.Element) Element.prototype = Browser.Element.prototype;
Replace: if (this.Browser.Element) Element.prototype = this.Browser.Element.prototype;
3
Find: var IFrame = new Type
Replace: var IFrame = this.IFrame = new Type
4
Find: var Cookie = new Class
Replace: var Cookie = this.Cookie = new Class
(download | compressed version)
In your parent index.html file, put the following script element in the head
<script type="text/javascript" src="mootools-core-init.js"></script>
Finally, in your iframe.html file, put the following inline script element in the head to extend the iframe's window and document (it must be before any included or inline scripts that need to use Mootools):
<script type="text/javascript">parent.initMootoolsCore.call(window);</script>
No, the iframe.html is an independent page. It does not "inherit" anything from the previous page.
If you set an unbeforeunload event inside an iframe, this is not triggered when you for instance click through to a link in the iframe. It works in IE and Firefox (not Opera, but Opera does not support onbeforeunload in general AFAIK).
Just wondering, am I doing something wrong? Should this behaviour not be possible? Or is it a bug in Google Chrome/webkit? Any workarounds?
Code example:
test.html:
<html>
<body>
<p>Main page content</p>
<script type="text/javascript">
window.onbeforeunload = function() {alert('unloadevent in main window');};
</script>
<iframe id="tpa" src="..test2.html"></iframe>
</body>
</html>
test2.html:
<html>
<body>
<script type="text/javascript">
self.onbeforeunload = function() {alert('unloadevent in frame window');};
</script>
Link to for instance google
</body>
</html>
This is fixed now. See Ticket.
I found an ungentle method to fix it.
In my parentPage which holds the domain "a.b.com":
<html>
<iframe id="OBU" name="OBU" src="c.d.com">
</iframe>
<script>
window.onbeforeunload = function() {
window.frames["OBUI"].frames["SubOBUI"].location =
"a.b.com/demo.jpg?t="+(new Date()).getTime();
}
</script>
</html>
In my "c.d.com":
<iframe id="SubOBUI" name="SubOBUI" src="a.b.com/demo.jpg"
onload="someMethodThatShouldBeExecutedWhileUnload"></iframe>
<script>
var someMethodThatShouldBeExecutedWhileUnload : function() {
alert(1);
}
</script>
Have a try!
Seems it is an open issue in webkit (and not about to be fixed soon):
https://bugs.webkit.org/show_bug.cgi?id=19418
If anyone knows of workarounds, let me know.
The alternative may be to handle the click event in your iframe links at the document level or to pre-process the iframe page and alter the links to execute your custom JS handler. Then suppress the propagation of click event based on your business rules.