I have the following code:
<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function googleJS1(){
var iframe = document.getElementsByTagName('iframe')[0];
var doc = iframe.contentWindow.document;
var newScript = doc.createElement('div');
newScript.setAttribute("id", "google_translate_element");
var bodyClass = doc.getElementsByTagName('body')[0];
bodyClass.insertBefore(newScript, bodyClass.childNodes[0]);
}
function googleJS2(){
var iframe = document.getElementsByTagName('iframe')[0];
var doc = iframe.contentWindow.document;
var newScript = doc.createElement('script');
newScript.setAttribute("src", "http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit");
var bodyClass = doc.getElementsByTagName('head')[0];
bodyClass.insertBefore(newScript, bodyClass.childNodes[0]);
}
function googleJS3(){
var iframe = document.getElementsByTagName('iframe')[0];
var doc = iframe.contentWindow.document;
var newScript = doc.createElement('script');
newScript.setAttribute("src", "http://www.mydomain.com/google.js");
var bodyClass = doc.getElementsByTagName('head')[0];
bodyClass.insertBefore(newScript, bodyClass.childNodes[1]);
}
function googleJS4(){
var iframe = document.getElementsByTagName('iframe')[0];
var doc = iframe.contentWindow.document;
var newScript = doc.createElement('style');
var content = doc.createTextNode('.goog-te-banner-frame { display: none; } #google_translate_element {}');
newScript.appendChild(content);
var bodyClass = doc.getElementsByTagName('head')[0];
bodyClass.insertBefore(newScript, bodyClass.childNodes[2]);
}
</script>
<iframe width=100% height= 100% onload ="googleJS1(); googleJS2(); googleJS3(); googleJS4();" class=iframe2 src="www.mydomain.com/test.html">
This code works fine on another server of mine elsewhere. However whenever this is run the console says "Uncaught referencer error, method undefined". Even though it is defined, why does it throw this message and how do I solve it?
Thanks
I haven't tested, but I'm assuming this is because the onload event is attached to the iframe, and will therefore be called inside the iframe's scope. Try calling window.parent.googleJS1() instead.
Related
In addition to this topic execute a javascript after page load is complete I noticed the solution didn't work for loading a map. I do have a similar use case. However, if I follow the script the script needed doesn't load.
I want to load a map after the loading of the page is finished, however I do see the script in the page source, but no script is executed.
The source is:
var mst_width = "96%";
var mst_height = "350vh";
var mst_border = "0";
var mst_map_style = "simple";
var mst_mmsi = "244770624";
var mst_show_track = "true";
var mst_show_info = "true";
var mst_fleet = "";
var mst_lat = "";
var mst_lng = "";
var mst_zoom = "";
var mst_show_names = "0";
var mst_scroll_wheel = "true";
var mst_show_menu = "true";
window.onload = function () {
var element = document.createElement("script");
element.src = "http://www.myshiptracking.com/js/widgetApi.js";
document.getElementsByTagName("head")[0].appendChild(element);
}
In the page source I see:
var mst_width = "96%";
var mst_height = "350vh";
var mst_border = "0";
var mst_map_style = "simple";
var mst_mmsi = "244770624";
var mst_show_track = "true";
var mst_show_info = "true";
var mst_fleet = "";
var mst_lat = "";
var mst_lng = "";
var mst_zoom = "";
var mst_show_names = "0";
var mst_scroll_wheel = "true";
var mst_show_menu = "true";
window.onload = function () {
var element = document.createElement("script");
element.src = "http://www.myshiptracking.com/js/widgetApi.js";
document.getElementsByTagName("head")[0].appendChild(element);
}
Can someone please point me in the direction on how to get the script executed? I also assumed that the script should be appended to the 'body' instead of the 'head'm but I'm not sure about it.
Thanks!
Edit based change of head to body:
<script>
var mst_width="96%";var mst_height="350vh";var mst_border="0";var mst_map_style="simple";var mst_mmsi="244770624";var mst_show_track="true";var mst_show_info="true";var mst_fleet="";var mst_lat="";var mst_lng="";var mst_zoom="";var mst_show_names="0";var mst_scroll_wheel="true";var mst_show_menu="true";
window.onload = function() {
var element = document.createElement("script");
element.src = "http://www.myshiptracking.com/js/widgetApi.js";
document.getElementsByTagName("body")[0].appendChild(element );
}
</script>
So, finally I managed to solve the problem and got the desired map in my browser... using the following HTML+JS code (which you can run with the button below):
<html lang="en-US" prefix="og: http://ogp.me/ns#">
<head>
<script>
var mst_width="100%";var mst_height="450px";var mst_border="0";var mst_map_style="terrain";var mst_mmsi="";var mst_show_track="";var mst_show_info="";var mst_fleet="";var mst_lat="";var mst_lng="";var mst_zoom="";var mst_show_names="0";var mst_scroll_wheel="true";var mst_show_menu="true";
function loadMap() {
var element = document.createElement("script");
element.setAttribute("id", "myshiptrackingscript");
element.setAttribute("async", "");
element.setAttribute("defer", "");
element.src = "http://www.myshiptracking.com/js/widgetApi.js";
document.getElementById("mapContent").appendChild(element );
}
window.onload = loadMap
console.log('Registered onload')
</script>
</head><body>
<div id="mapContent" />
</body></html>
Two points of attention:
you should add the created script tag as child of a tag belonging to the body ot the page (I used <div id="mapContent"/> and getElementById to access it)
you should load the HTML page through a http:// URL, not through a a file:// one: with the latter you get an error with message like "Browser does not support embedded objects"
I hope this can help you to solve the problem in you real case!
There are many ways to invoke your function when the page has loaded.
My vanilla's js tool of choice most of the time is:
window.addEventListener('DOMContentLoaded', function(){
//your bindings and functions
}
That way of proceeding is preferred to your onload method as otherwise, you won't be able to attach multiple events when the DOM loads completely.
Try this:
window.onload=function(){
document.write('<script src="http://www.myshiptracking.com/js/widgetApi.js>
</script>');
}
wrap your javascript code with this:
if(document.readyState === 'complete') {
// good to go! Put your code here.}
Please be advised that the following codes are generated by an engineer. (I don't have contact with the engineer right now)
Now here is the scenario. According to the engineer who had created this the whole collection of these scripts should be able to generate a button once edited properly and embedded to our website.
Before I implement this on our own website I want to test these codes to a simple page created through saving codes from our website. I ask the engineer if it is possible and he said yes.
Now here is the code that should be able to generate the button.
clickCall.js
(function () {
var createScriptElement = function (src, onload, onerror) {
var element = document.createElement("script");
element.type = "text\/javascript";
element.src = src;
element.onload = onload;
element.onerror = onerror;
return element;
};
var createLinkElement = function (src) {
var element = document.createElement('link');
element.href = src;
element.rel = 'Stylesheet';
element.media_type = 'text/css';
return element;
};
var createUI = function () {
var clickCallDiv = document.createElement('div');
clickCallDiv.style.cssText = 'width: 300px;height: 60px;position: fixed;z-index: 999;right: 20px;bottom: 320px;';
var call_btn = document.createElement("button");
call_btn.id = "dial_btn_call";
var session_div = document.createElement("div");
session_div.id = 'sessions';
var webcam_div = document.createElement("div");
webcam_div.style.cssText = 'height:0';
webcam_div.id = 'webcam';
var video_remote = document.createElement('video');
video_remote.id = 'remoteView';
video_remote.autoplay = 'autoplay';
video_remote.hidden = 'hidden';
var video_local = document.createElement('video');
video_local.autoplay = 'autoplay';
video_local.hidden = 'hidden';
video_local.muted = 'muted';
video_local.id = 'selfView';
webcam_div.appendChild(video_remote);
webcam_div.appendChild(video_local);
clickCallDiv.appendChild(call_btn); //add the text node to the newly created div.
var contain = document.createElement('div');
contain.appendChild(session_div);
contain.appendChild(webcam_div);
clickCallDiv.appendChild(contain);
return clickCallDiv;
};
var urls = {};
urls.rtcninja = 'rtcninja.js';
urls.jquery = 'jquery.js';
urls.i18n = "jquery.i18n.js";
urls.messagestore = "jquery.i18n.messagestore.js";
urls.jssip = 'jssip.js';
urls.init = 'init.js';
urls.gui = 'gui.js';
urls.css = 'style.css';
var rtcninja_script = createScriptElement(urls.rtcninja, function () {
// Must first init the library
rtcninja();
// Then check.
if (!rtcninja.hasWebRTC()) {
console.log('WebRTC is not supported in your browser :(');
} else {
document.body.appendChild(createUI());
}
});
var jquery_script = createScriptElement(urls.jquery, function(){
document.head.appendChild(i18_script);
document.head.appendChild(jssip_script);
document.head.appendChild(gui_script);
document.head.appendChild(init_script);
});
var i18_script = createScriptElement(urls.i18n, function(){
document.head.appendChild(messagestore_script);
});
var messagestore_script = createScriptElement(urls.messagestore);
var jssip_script = createScriptElement(urls.jssip);
var init_script = createScriptElement(urls.init);
var gui_script = createScriptElement(urls.gui);
var click_call_css = createLinkElement(urls.css);
document.head.appendChild(jquery_script);
document.head.appendChild(rtcninja_script);
document.head.appendChild(click_call_css);
})();
That script, when embedded, should be able to generate a button. The way he embedded the script on their website is through this
<script>
document.write('<script src="sourcefile/clickCall.js">/script>')
</script>
But this won't work on my side so I tried this
document.write('<sc' + 'ript src="clickCall.js">/sc' + 'ript>')
Now my first problem is that this script prevents all other scripts from loading, causing to have an empty output. another is that it won't display the expected button that it was suppose to show on the webpage. My solution to this problems was to implement DOM but I don't know how I'll implement it especially because I can't understand how it works and how to implement it. Could you kindly explain to me how DOM works and how am I going to implement it? Thanks
document.write when executed just writes the string and doesn't execute the inside script.
Hence, instead of this,
<script>
document.write('<script src="sourcefile/clickCall.js"></script>')
you can directly call your script.
<script src="sourcefile/clickCall.js"></script>
I am loading a .js file I wrote. Within that .js file I am creating a Iframe like this
var frmSource = "http://MYLINK.com/mypage.php?" + encodeURI(URLBuilder);
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", frmSource);a
ifrm.style.width = 0+"px";
ifrm.style.height = 0+"px";
ifrm.setAttribute("frameBorder", "0");
document.body.appendChild(ifrm);
URLBuilder contains the GET variables to the next page
The issue occurs at document.body.appendChild(ifrm);
and my error is
javascript typeerror: null is not an object (evaluating 'document.body.appendchild')
I suspect the issue is it is trying to append the iframe to the body but the body has not properly loaded. I am currently only getting this issue in safari.
If your script is in the head, then the body is not defined (null). Put the script in the footer.
I have done something like this to configure my IFrame creation and it is working fine
var urlWithParam = url + encodeURI(URLBuilder)
var iframe = document.createElement('iframe');
iframe.src = urlWithParam;
iframe.id = "iframe_" + done;
iframe.style.position = "relative";
iframe.style.height = "100%";
iframe.style.width = "100%";
iframe.style.top = "0";
iframe.style.left = "0";
iframe.style.right = "0";
iframe.style.bottom = "0";
iframe.style.frameBorder = "0";
iframe.style.borderStyle = "none";
iframe.style.display = "none;";
//if you want to do something after the Iframe load
iframe.onload = function(event) {
};
Moved the script below the body. And it worked like a charm.
I'm calculating the height of an iframe using a JavaScript function and store it in a Variable, now I want to send that variable to jQuery to set the height().
My JavaScript function
function iframeLoaded()
{
var iFrameID = document.getElementById('ftwo');
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight;
}
The functions works fine because when I alert the value, it display it correctly, and I'm in the same domain that I'm calculating the height
$(document).ready(function(){
$("#ftwodiv").height(iFrameID);
});
on my body tag I have this:
<iframe id="ftwo" width="455px" onLoad="iframeLoaded()"
scrolling="no" frameborder="0" src="http://www.company.com"></iframe>
I tried some stuff that did not work.
You can return that from the function and use it.,.
function iframeLoaded(){
var hgt = 0;
var iFrameID = document.getElementById('ftwo');
hgt = iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight;
return hgt;
};
$(document).ready(function(){
var iFrameID = iframeLoaded();
$("#ftwodiv").height(iFrameID);
});
You can also use a Global variable to achieve the same..
var iFrameHeight = 0;
function iframeLoaded(){
var hgt = 0;
var iFrameID = document.getElementById('ftwo');
iFrameHeight = iFrameID.height = FrameID.contentWindow.document.body.scrollHeight;
};
$(document).ready(function(){
$("#ftwodiv").height(iFrameHeight);
});
But the first approach is cleaner
I'm looking to add a script to an iFrame's header while not losing everything contained in the iFrame's body or header...
here is what I have right now which does update the iFrame with the new script, but it cleans everything in the iframe out, not appends which is what I'd like. thxs! B
// Find the iFrame
var iframe = document.getElementById('hi-world');
// create a string to use as a new document object
var val = '<scr' + 'ipt type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></scr' + 'ipt>';
// get a handle on the <iframe>d document (in a cross-browser way)
var doc = iframe.contentWindow || iframe.contentDocument;
if (doc.document) { doc = doc.document;}
// open, write content to, and close the document
doc.open();
doc.write(val);
doc.close();
var headID = document.getElementsByTagName("head")[0];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'yourpath';
headID.appendChild(newScript);