We Keep Coding

Read and replace text in HTML causes high CPU load

I have a problem with high CPU load on a website where I want to replace some text with links.
The script is loaded at the end of body.
This works normally when there are no videos on the page. But if there are videos embedded like this the CPU load goes above 50%. If I use this for multiple files Firefox crashes.
<p><video width="320" height="240" class="mediaelement" autoplay="autoplay" src="video.mp4" controls="controls">resources/video.mp4</video></p>
I figured out the problem is in this, especially the readout from csv. If I just replace the text with fixed data it works as well.
var rawFile = new XMLHttpRequest();
rawFile.open("GET", "data.csv", false);
rawFile.overrideMimeType('text/xml; charset=iso-8859-1');
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
allText = allText.split("\n");
var sizedata = Object.size(allText); //Number of entries
var sizedata = sizedata -1; //Excel +1
//alert("Debug: " + sizedata);
var i = 0;
while (i < sizedata)
{
var word = allText[i].split(";");
var wordToDefine = word[0];
var wordDefinition = word[1];
var wordToReplace = wordToDefine
var replaceItem = new RegExp(wordToReplace,"g");
document.body.innerHTML = document.body.innerHTML.replace(replaceItem, " <a href='data.html' target='_self'><span style='color:green' title='WORD'>WORD</span></a>");
i = i+1;
}
}
}
}
rawFile.send(null);
Any ideas what I can do about this?
Thank you in advance.

As #criz already mentioned, building DOM in a loop is a very bad practice. It's much better to create documentFragment and attach it to the DOM. Take a look at the https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment There is an example.

Embedding should have been able to show the button

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>

Trouble with iFrame.contentDocument

Basically, im making a javascript to refresh a page and it will find the price and buy the item when it goes up for the price desired.
I got it to work without the iframe, but I need to to work in the iframe, which is the problem ive reached.
If you went to this page: [ http://m.roblox.com/items/100933289/privatesales ]
and ran this code:
alert(document.getElementsByClassName('currency-robux')[0].innerHTML);
You would get an alert for the lowest price. In the code, this doesnt work (Hence, my problem.)
Try running the code below on this page to get it to work [ http://www.roblox.com/Junk-Bot-item?id=100933289 ]
var filePath = document.URL;
var itemid = filePath.slice(((filePath.search("="))+1));
var mobileRoot = 'http://m.roblox.com/items/';
var mobileEnd = '/privatesales';
var mobileFilePath = mobileRoot+itemid+mobileEnd;
var iframe2 = '<iframe id="frame" width="100%" height="1" scrolling="yes"></iframe>';
document.write(iframe2);
var iframe = parent.document.getElementById("frame");
iframe.height = 300;
iframe.width = 500;
iframe.src = mobileFilePath;
var price;
var snipe = false;
var lp = Number(prompt("Snipe Price?"));
document.title = "Sniping";
function takeOutCommas(s){
var str = s;
while ((str.indexOf(",")) !== -1){
str = str.replace(",","");
}
return str;
}
function load() {
if (snipe == false) {
tgs = iframe.contentDocument.getElementsByClassName('currency-robux');
price = Number((takeOutCommas(tgs[0].innerHTML)));
alert(price);
}
}
iframe.onload = load;

You might try having both pages — the one from "m.roblox.com" and the one from "www.roblox.com" — add the following up at the top of the head:
<script>
document.domain = "roblox.com";
</script>
Code from the different domains won't be allowed to look at each others page contents, but if you set the domains to the same suffix then it should work.

If you can't get it to work by sharing the same document.domain="roblox.com" code then you can try posting messages to the iframe.
Put this inside the iframe page:
window.addEventListener('message',function(e) {
});
In the parent page execute this to pass a message (can be a string or object, anything really) to the iframe:
document.getElementById("frame").contentWindow.postMessage({ "json_example": true }, "*");
Put this in the parent to listen for the message:
window.addEventListener("message", messageReceived, false);
function messageReceived(e) {
}
From inside the iframe posting a message back out:
window.parent.postMessage('Hello Parent Page','*');

TypeError: Object doesn't support this property or method in IE8 / IE9

I am embedding a flex swf inside a html/dojo popup dynamically. It works fine in FF and Chrome but in IE8/IE9 I am getting "TypeError: Object doesn't support this property or method". In IE the first time the popup with the swf is created everything works fine. However once I hide the popup and open it again and then try and call the actionscript function inside flex it throws error. Any help will be appreciated. Following is the code snippet:
var srchSuggestDlg;
var srchDlg;
var isSuggSwfInit = false;
/* Called on key up for the search box widget or when search arrow button is clicked
* Displays search suggestions inside popover below the search widget
*/
cpm.home.index.searchKeyUp = function(evt) {
var srchInput = dojo.byId('xwt_widget_uishell_Header17_0_search_searchTextAP');
if(srchInput.value.length<3)
return;
if(srchSuggestDlg && srchSuggestDlg.isShowingNow)
{
try
{
swfobject.getObjectById("srchSuggSwf").updateSearchInFlex(srchInput.value);
}
catch(e){
console.error("swf may not be ready 1",e);
}
return;
}
if(srchSuggestDlg == null)
{
srchSuggestDlg = new xwt.widget.layout.Popover({pinnable: false, title: "Suggestions", sideAlign: false, autofocus: false, showHelp: false});
var divx=dojo.create("div");
divx.innerHTML="<div id='srchSuggDiv'></p></div>";
srchSuggestDlg.containerNode.appendChild(divx);
srchSuggestDlg.openAroundNode(srchInput);
var flashvars = {swfId:"srchSuggSwf", searchString:srchInput.value};
var params = {};
params.quality = "high";
params.bgcolor = "#ffffff";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "srchSuggSwf";
attributes.name = "srchSuggSwf";
attributes.align = "middle";
params.wmode="window";
var cachecontrol = Math.floor(Math.random()*99999);
swfobject.embedSWF("pages/modules/monitor/flex/SearchSuggestion.swf?"+cachecontrol,"srchSuggDiv","200","140","9.0.0","playerProductInstall.swf",flashvars, params, attributes);
swfobject.createCSS("#srchSuggDiv", "display:block;text-align:left;");
}
else
{
srchSuggestDlg.openAroundNode(srchInput);
try
{
var srchInput1 = dojo.byId('xwt_widget_uishell_Header17_0_search_searchTextAP');
//dojo.byId("srchSuggSwf").updateSearchInFlex(srchInput1.value);
swfobject.getObjectById("srchSuggSwf").updateSearchInFlex(srchInput1.value);
}
catch(e) {
console.error("swf may not be ready 2",e);
}
}
};
/* Called from flex once flex swf is initialized
*/
cpm.home.index.suggSwfInit = function(value){
var srchInput = dojo.byId('xwt_widget_uishell_Header17_0_search_searchTextAP');
try
{
dojo.byId("srchSuggSwf").updateSearchInFlex(srchInput.value);
}
catch(e){
console.error("swf may not be ready in 3",e);
}
};

Common issue, download and install Node.js = https://nodejs.org/en/download/

Javascript object required error in IE

i'm creating mulitple planet objects in javascript to handle animation.
The animation works fine for each planet but i am getting errors in IE 6/7 saying "object required on line 15 char 2"
Code:
var earthObj = null;
var mercObj = null;
var jupiObj = null;
var animate;
function init()
{
mercObj = document.getElementById('mercury');
earthObj = document.getElementById('earth');
jupiObj = document.getElementById('jupiter');
mercObj.style.position= 'relative';
mercObj.style.left = '54px';
mercObj.style.visibility = 'hidden';
earthObj.style.position= 'relative'; //error on this line
earthObj.style.left = '80px';
earthObj.style.top = 300px';
}

Before trying to call an object, test if it exists.
earthObj = document.getElementById('earth');
if(!earthObj) {
alert("Could not find Earth");
return;
}

I am on mac and don't have any IE to try. Do you get the same error, if you change the code like this:
function init() {
var earthObj = null;
var mercObj = null;
var jupiObj = null;
var animate;
mercObj = document.getElementById('mercury');
earthObj = document.getElementById('earth');
jupiObj = document.getElementById('jupiter');
mercObj.style.position= 'relative';
mercObj.style.left = '54px';
mercObj.style.visibility = 'hidden';
!earhtObj && alert("There is no element with id 'earth'");
earthObj.style.left = '80px';
earthObj.style.top = '300px';
earthObj.style.position= 'relative';
}
I came accros this post and thought if the error might be connected with IE6/7 bug that triggers when some global variable gets the same name as dom object.
I also moved the earthObj.style.position= 'relative'; to the end of block and expect the error to reaper at earthObj.style.left = '80px';

I've found that in IE, the function works if the script is after the defined/generated HTML elements.
i.e. place the script at the end of the HTML document, rather at the beginning, or use jquery's ready function:
$(function() {
mercObj = document.getElementById('mercury');
});