Delphi, EmbeddedWB/TWebbrowser - jQuery not executing - javascript

I am using EmbeddedWB (A TWebbrowser extension) to do like a "live preview" of some dynamically generated content.
I am trying to add jQuery into the mix, so I can get some fancy effects going on, however since IE9 always asks "Allow blocked content" for each and every damn page, a dynamically generated one (Webbrowser.LoadFromString) certainly wont be allowed to have fun. To put it simple: It wont allow Javascript execution.
I tried adding a SecurityManager to my TEmbeddedWB, however that did not do it either. I tested my dynamic code in Firefox, and in IE9, and it works (of course, in IE9 I have to allow first, which was how I found it was a security issue).
Is there a painless way to get around this, without having to manually go into IE and tweak something? Or am I completely wrong about the cause of the issue?
EDIT: After trying this article's method, IE does not ask if it should allow stuff anymore, however my script is still not being executed within my TEmbeddedWB/TWebbrowser..
EDIT 2: Okay, by removing the jQuery code, and displaying a plain Alert, I am forced to conclude that JS is now being executed, however jQuery is not.
EDIT 3: Here is the (stripped down) HTML code that my app generates, where jQuery is not working in my EmbeddedWB/TWebbrowser control - however, it works in Internet Explorer 9 itself:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<script type="text/javascript" src="file://C:\jQuery.js"></script>
</head>
<body>
<center>
<p>
Some stuff here!
</p>
</center>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
alert('I Am jQuery!!!!');
});
</script>
</body>
</html>
EDIT4: I have also tried switching the src to a Google Hosted jQuery, and that did not work either. Removing the Metatag did not fix it either. Just letting you know of stuff I tried before you waste time on suggesting it :)
EDIT5: By navigating to a site that uses jQuery (Webbrowser.Navigate) the site was working as expected. However when doing it from my local test.html, or by doing .LoadFromString();, it will not work.
Will not work = jQuery code not executing.

It seems to work if you use correct URL for the jquery.js file:
<script type="text/javascript" src="file://C:/jQuery.js"></script>
<script type="text/javascript" src="file:///jQuery.js"></script>
or a relative path, you can also omit the file:// protocol:
<script type="text/javascript" src="../../jQuery.js"></script>
The above works when you load the HTML from a file. The question is however, if content from memory and javascript from file system is not considered crossing a security context boundary and rejected for that reason by the embedded browser. In that case, embedding jquery directly in the HTML content (using the <script> tag) should work.

Related

Javascript null error when using external script in a Rails app

I am using a banner ad from an ad service provider, similar to google adsense.
Instruction from their site state clearly and simply that all we need to do is to copy the below code to the body of our webpage
<!-- Begin Hsoub Ads Ad Place code -->
<script type="text/javascript"><!--
hsoub_adplace = [my account id];
hsoub_adplace_size = '728x90';
//--></script>
<script src="http://ads2.hsoub.com/show.js" type="text/javascript"></script>
<!-- End Hsoub Ads Ad Place code -->
I have copied and pasted into my rails app, inside a body of a view file but the banner is not getting displayed and I can see javascript error (with browser inspect source)
TypeError: document.getElementById(...) is null
ps: On old browsers the banner is getting displayed but never on recent versions of browsers.
ps2: The support of hsoub confirmed multiple times, there is no problem from their side (their code is fine and working on thousands of websites, and my account is active with no issues). And it must be a problem from my code.. I am thinking the way Rails handles javascript...
Can you please help me solve this error and get the banner displayed.
ps3: I am using rails 6.0.1 and turbolinks 5.2.0
you can check the error/source code online at https://tafqit.com/
The problem is caused by Rocket Loader feature of CloudFlare cdn service
Rocket Loader improves paint times for pages that include Javascript.
Visitors will have a better experience by seeing content load faster
and speed is also a factor in some search rankings.
Rocket Loader improves paint times by asynchronously loading your
Javascripts, including third party scripts, so that they do not block
rendering the content of your pages.
I disabled it and banner is appearing now.
I am going to guess that this is a script positioning issue. It looks like the script is possibly looking for elements that are not rendered yet, i.e. the document and document body is not ready. Move the scripts to the end of the page i.e. after the body tags and see if that helps. Otherwise please add the exact error and perhaps show a condensed view of your page and the scripts relative to the other elements.
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Hello world</h1>
</body>
<script type="text/javascript">
hsoub_adplace = 12345;
hsoub_adplace_size = '728x90';
</script>
<script src="http://ads2.hsoub.com/show.js" type="text/javascript"></script>
</html>
I managed to get the iframe to load by moving the scripts
Scripts are (still) inside the body tags.

jQuery clash on Internet Explorer

I put together a script that works a charm in Chrome and that, for some reason, refuses to work properly in Internet Explorer 9. The page simply hangs/freezes forever ... and then loads. Likewise, when the user does anything on the page after it has loaded (in this instance loading highcharts by selecting items on dropdown boxes) it will hang/freeze ... and eventually work.
I have tried to debug the page but the freezing makes it very difficult and agonizing. I have had no success identifying the source of the issue. My code loads three libraries and uses one custom script that I put together myself.
Here are the three libraries:
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script src="../Highstocks/js/highstock.js"></script>
<script src="../Highstocks/js/highcharts-more.js"></script>
What I do know from my debugging efforts:
(1) The page refuses to load properly in IE whether I include my custom code or not.
(2) I have tried to remove my libraries one by one. When I remove jquery-ui.min.js the page loads normally. Obviously can't do much with it at that point though ... :-) I have tried loading different versions of jQuery and jQuery UI with no success.
Does anybody have a clue as to what I can do to overcome this bottleneck?

Webpage hangs until clearing cache

I am developing an HTML5 game with jQuery. However, sometimes the page hangs up when loading (For now I only saw this happen on Chrome for mac). When it hangs, sometimes there is a string "waiting app cache" at the bottom. The webpage won't respond to any user mouse event during that time. The same will happen even if you reload the page. However, if you go to settings and clear cached images and files, the webpage won't hang on loading again.
I have no idea why this happen. There is no error in the console so I don't know where the problem could be. What's worse, when the webpage hangs it will be hard to even open the debug console. Any ideas or guesses as to why this happens? Thanks in advance!
Follow up, my javascript entry point:
$(window).ready(function() {
middleLayerInitialize();
initialize();
addEventListeners();
});
Here is how I include jQuery:
<link rel="stylesheet" href="./styles/jquery.mobile-1.3.2.css" />
<script type="text/javascript" src="./js/jquery-1.10.1.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.3.2.js"></script>
<script type="text/javascript" src="./js/jquery.mousewheel.js"></script>
The two most common reasons for this are (1) you are including jQuery twice or (2) you are loading a ton of html and jQuery has to wait on your html to finish loading. If you download jQuery directly into your directory and include it in the HTML header, it may help.
http://jquery.com/download/
<head>
<script src="jquery-1.11.0.min.js"></script>
</head>
Make sure that you aren't downloading it like below.
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>
</head>
And make sure there is only one line including jQuery.
A final option (least likely to help). I don't know your setup, but try:
$(document).ready(function() {
// put all your javascript here.
});
instead of using (window).ready. I say this because you usually don't use (window).ready. You either use what I have written above or
window.onload=function(){SomeJavaScriptCode};

Alert does not trigger, JS is not detected

I think I might be going crazy at this point. I had an ASP page working yesterday, and came in today to Firebug telling me it cannot detect the JavaScript on the page. Love it when things change after not touching them.
So I start trying to figure out what is happening. I tried slimming down the code, this answer, restarting Firefox, saving the page under a new name and loading the new one, and adding a ridiculous amount of code I generally consider unnecessary. I even tried removing everything from the page and changing it to this:
<script>
alert("yay");
</script>
Does not trigger alert, and Firebug says "No JavaScript on this page". I've been looking for explanations for almost 2 hours and cannot figure out what is happening. I know I did not deactivate anything because other pages will show JavaScript and function properly. I also know that no add-ons are causing it.
I am using Firefox 28.0 (also tried on 27.0.1). Opening the page in Chrome triggers the alert.
(Damn I meant to post this as a comment).
As you responded I'll re-popualate...
I create jsfiddle,
<body>
<script>
alert("yay");
</script>
</body>
Also ensure your browser has javascript enabled.
You should follow the instructions on the Firebug's first aid page.
I assume it's either some Firebug setting or a conflict with another extension. (I see at least YSlow and FlashFirebug installed.)
To check that you can create a new profile and just install Firebug.
Closing the tab and opening the same link in a new tab seemed to resolve the issue.
I'm not sure if any of the prior attempts factored in, so I will list them as well. To be clear, none of these worked, but may have paved the way in some fashion.
Restarting Firefox
"Clear Activation List" on Firebug
Save page under new filename and load the new page
Uninstalling add-ons (all of them)
Create new profile and load page on that profile
Add a <!DOCTYPE html> to the top
Add type="text/javascript" to script tags
Add charset="utf-8" to script tags
Add <meta charset="utf-8"> in <head>

IE (9/8) bug is it just me?

So in my JavaScript app I am doing some dynamic script injection etc during runtime. Like appending script tags to the head of my document post page on load.
It seems fine if I go directly to the URL of the page through the navigation bar but when I do a right click refresh, IE seems to ignore any or all of my script tag injections.
Has anyone else seen this problem of have suggestions?
Don't see this in Chrome, FF, Safari.
I am using requireJS to do the injection if that makes a difference, but since it just does a document.createElement("script") etc. shouldn't make a difference.
Looks like the problem has actually that I am dependent on the load event ... IE / jQuery seem to be buggy in regards to maintaining the proper execution of onload for window. Using a timeout as a backup to dynamically inject the JS.
You might want to try disabling the use of the cache on those pages. See this: http://www.htmlgoodies.com/beyond/reference/article.php/3472881/So-You-Dont-Want-To-Cache-Huh.htm
According to the article above, one method you could use to disable use of cache is to put
<HEAD>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
</HEAD>
at the END of the page

Categories