I'm trying to optimize the page render and download and I'm stuck in this situation...
I'd like to load an advertise at the end of page load, I made a simple test PAGE
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var AdBrite_Title_Color = '443E3E';
var AdBrite_Text_Color = '443E3E';
var AdBrite_Background_Color = 'D1CFCF';
var AdBrite_Border_Color = '443E3E';
var AdBrite_URL_Color = '443E3E';
try{var AdBrite_Iframe=window.top!=window.self?2:1;var AdBrite_Referrer=document.referrer==''?document.location:document.referrer;AdBrite_Referrer=encodeURIComponent(AdBrite_Referrer);}catch(e){var AdBrite_Iframe='';var AdBrite_Referrer='';}
$(document).ready(function(){
});
</script>
</head>
<body style="background: #90EE90;">
<div id="page" style="">
<div id="loginbox" style="position: fixed; top: 150px; left: 250px;">
<span style="white-space:nowrap;"> <!-- AD MUST BE HERE-->
<a target="_top"
href="http://www.adbrite.com/mb/commerce/purchase_form.php?opid=1866421&afsid=1">
<img src="http://files.adbrite.com/mb/images/adbrite-your-ad-here-banner-w.gif"
style="background-color:#443E3E;border:none;padding:0;margin:0;"
alt="Your Ad Here" width="11" height="60" border="0" />
</a></span>
</div>
</div>
</body>
</html>
Where there is the HTML Comment originally there were:
<script type="text/javascript">
document.write(String.fromCharCode(60,83,67,82,73,80,84));
document.write(' src="http://ads.adbrite.com/mb/text_group.php?sid=1866421&zs=3436385f3630&ifr='+AdBrite_Iframe+'&ref='+AdBrite_Referrer+'" type="text/javascript">');
document.write(String.fromCharCode(60,47,83,67,82,73,80,84,62));
</script>
I need to load this element after page using jquery, I tried many solution, binding document.write action, adding a <script></script> element but nothing works...
I really need an help ;)
At the end I solved my problem, loading an iframe after page load using jQuery...
Create a specific page for ADV, then loading the iframe
$(document).ready(function(){
$('#advtop').html('<iframe src="http://www.blablabla.ext/ad.php?pos=top"></iframe>');
});
The AD script won't slow the page load, and when the document is ready the iframe is placed in the correct position, without causing ADV replacing everything, also ADV get the correct URL referrer
Hope this could help someone...
I actually did this on the newsweek.com site using a script called writeCapture.js. It intercepts the document.write method and switches all the ad code to html injection (really fancy stuff!).
Anyway, to see a working example hit up (newsweek.com) thedailybeast.com and enter newsweek.ads.refresh() in the console. As for documentation, the writeCapture site will explain everything.
I do this on my site using the following code:
function adScript(){
var s1 = document.createElement('script');
s1.src='http://put_your_url_here';
s1.type = 'text/javascript';
s1.onload = function(){
// initialize the page to use the script
}
document.getElementsByTagName('head')[0].appendChild(s1);
}
adScript();
Essentially, the 'adScript' function is called in the '$(document).ready' jQuery event. This dynamically creates a script tag. The browser loads the remote script. Once loaded, your 'onload' function is executed.
Hope that helps.
Bob
Related
When I am using curl in order to retrieve a html page, I face with the following message:
Please turn JavaScript on and reload the page.
I am not sure how to handle this, hence I can open the same page on my web-browser.
[Q] How could I fix this in order retrieve html-page's information only using terminal?
$ curl http://bsod.pw/
<html>
<head>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
function onSubmit(token) {
document.getElementById("recaptcha-form").submit();
}
</script>
</head>
<body>
<div id="recaptcha-loading" style="margin: 0px; padding: 0px; position: fixed; right: 0px; top: 0px; width: 100%; height: 100%; z-index: 30001; opacity: 0.8;">
<p style="position: absolute; color: White; top: 30%; left: 40%;">
<img src="https://250410.selcdn.ru/antiddos/lg.rotating-balls-spinner.gif">
</p>
</div>
<center><noscript><h1 style="text-align:center;color:red;"><strong>Please turn JavaScript on and reload the page.</strong></h1></noscript>
<form id='recaptcha-form' action="/captcha" method="POST">
<button id='submitbutton' style="visibility:hidden;" class="g-recaptcha" data-badge=bottomright data-sitekey="6LcigjgUAAAAACyu9edrmWKmIce8h0kIFQz7iyRo" data-callback='onSubmit'></button>
<script>
window.onload = function(){
document.getElementById('submitbutton').click();
}
</script>
<br/>
</form>
</center>
</body>
</html>
If you do inspect element on the site(http://bsod.pw/) you can see that more detailed html code.
Thank you for your valuable time and help.
There is no "error". You make a GET request using curl. It returns you some HTML. The HTML happens to contain mostly links to JavaScript code that your browser is supposed to load and to execute. Your browser (with JS activated) could load the .js scripts and run them. Those scripts would generate some neat web page. If you don't load the linked scripts, and do not execute them, then you don't get much out of the page. Consider using a proper headless browser instead (see example below).
Here is a small example that is supposed to demonstrate the point:
<!DOCTYPE html>
<html>
<head>
<title>Source code empty, page full!</title>
</head>
<body>
<div id="fillThis">
<p>Almost nothing there in the source code!</p>
<p>... but inspect this div after JS is executed.</p>
</div>
<script>
var fillThis = document.getElementById("fillThis");
for (i = 0; i<1000; i++) {
var child = document.createElement('p');
child.innerHTML = "tons of content " + i;
fillThis.appendChild(child);
}
</script>
</body>
</html>
Just save this as "something.html", and open it in the browser. When you ask you browser to show page source, this is exactly what you will get. However, when you inspect the div by right-clicking on it, it will show a that it has >1000 child elements appended to it. Those are generated by JS in your browser, they do not come from the server in form of HTML.
Edit
I tried to access the page using PhantomJS, it almost worked. Here is what I did:
#!/bin/bash
cat <<HereDoc > /tmp/phantomjsScript.js
var page = require('webpage').create();
page.open('http://example.com', function(status) {
if(status === "success") {
console.log(page.frameContent);
}
phantom.exit();
});
HereDoc
phantomjs /tmp/phantomjsScript.js
This is a bash script that generates a helper script in /tmp, which is then executed by phantomjs. PhantomJS loads the website, and also executes the JavaScript. Unfortunately, the website that you've linked to is protected by a captcha-mechanism, and is not directly accessible, so the above example uses example.com instead. If you can somehow work around the captcha, you probably can use a similar script to load the HTML, run the JS, and then dump the rendered DOM to the console.
Try running the code on chrome. Actually the error is due to captcha connection and the error says "Cannot contact reCAPTCHA. Check your connection and try again."
I am trying to learn jQuery and I am confused how document.ready() function works
$(document).ready(function(){}
In html,
<script type="text/javascript" src="jquery.js"></script>
<script src="script.js" type="text/javascript"></script>
links are at the very bottom of the document, just before the closing body tag. In my javaScript file, I have all my code inside the .ready function. Yet, when I load the page, and I hover over a link, my cursor doesn't turn into a pointer for a couple of seconds, and if I immediately scroll down, the text is not yet loaded for a couple of seconds, either.
My javaScript file has a bunch of iframes etc... so I can understand why the delay, but what confuses me is that I thought the whole point of the .ready function was that the javaScript wasn't loaded until everything else in the page was loaded first? So surely my text and my css should be working straight away? Here is my code if it helps. I can post css too if required.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>myPage</title>
<link rel="stylesheet" type="text/css" href="styles2.css">
</head>
<body>
<div id="container">
<div id="backgroundLeft"><img id='backgroundLeftImage' src="Left.jpg" width="100%"></div>
<div id="wrap">
<p id="text">...some text... <span id="firstLink" class="link">click me</span>.<span><iframe id="frame" class="rect" scrolling="no" marginwidth=0 marginheight=0></iframe>
</span> ...some more text.... <span id="secondLink" class="link">click me</span>,
</span><span>
<iframe id="frame2" class="rect" scrolling="no" marginwidth=0 marginheight=0></iframe>
</span>
... some more text... <span id="thirdLink" class="link">click me</span> </span><span>
<iframe id="frame3" class="rect" scrolling="no" marginwidth=0 marginheight=0></iframe>
</span> ... some more text...
ETC...
</p>
</div>
<div id="backgroundRight"><img id='backgroundRightImage' src="2VillesRight.jpg" width="100%"></div>
<script type="text/javascript" src="jquery.js"></script>
<script src="script2.js" type="text/javascript"></script>
</body>
</html>
js
$(document).ready(function(){
var frame = $("#frame");
frame.attr("src","iframe.html");
var frame2 = $("#frame2");
frame2.attr("src","iframe2.html");
var frame3 = $("#frame3");
etc...
var player;
frame.bind("load", function () {
player = $(this).contents().find("#firstVid");
player.on('ended', function () {
frame.removeClass("open");
});
});
$("#firsLink").click(function(){
if (frame.hasClass("open"))
{
frame.removeClass("open");
player[0].pause();
}
else {
frame.addClass("open");
player[0].play();
}
});
var player2;
frame2.bind("load", function () {
player2 = $(this).contents().find("#sylvainVid");
player2.on('ended', function () {
frame2.removeClass("open");
});
});
$("#secondLink").click(function(){
if (frame2.hasClass("open"))
{
frame2.removeClass("open");
player2[0].pause();
}
else {
frame2.addClass("open");
player2[0].play();
}
});
var player3;
frame3.bind("load", function () {
player3 = $(this).contents().find("#etienneVid");
player3.on('ended', function () {
frame3.removeClass("open");
});
});
$("#thirdLink").click(function(){
if (frame3.hasClass("open"))
{
frame3.removeClass("open");
player3[0].pause();
}
else {
frame3.addClass("open");
player3[0].play();
}
});
etc...
});
I do know my code is repetitive, I am teaching myself so focused on getting it to work for now. Why is my main page taking so long to load if all my code is inside the "document.ready"? Thanks for your time
you can instead bind your javascript to the window.load event like this
Edit: tis is not good practice and unsupported in newer versions of jQuery
$(window).load(function(){ ... });
Correct way to do this
$(window).on("load", function(){ ... });
document ready lets you access the complete markup, even if the images and iframes have not loaded yet, this is desired in most cases.
In your case however, you might want to take the time penalty of waiting for everything to load, this is that the window.load event does.
$(document).ready() will only wait for all of the page's elements to load. It will NOT wait for the iFrames to load their content.
You can refer to this post if you have more questions:
$(document).ready and iframe content
Are you sure JQuery is loading properly? The source (src) property needs to point to the correct path. I find using the developer's tools to review errors, manipulate CSS and check DOM state to be helpful when learning. I prefer Chrome.
Happened to me too. What I found that, the solution is to include the file at the bottom outside of html tag (i.e the file in which you are using $(document).ready() ).
I assume that, this is because the html document is not ready by the time when browser compiler reached at this function.
The problem I am having is preventing a link from launching a new page and loading its href value in an iframe. The client site is using healcode a service that provides widgets to schedule fitness classes etc.Check this page When you click the signup button after the widget loads it opens a new page. What the client wants is to open that link on the same page or in a popup window. I have tried everything I can think of. I have used jQuery,fancybox, etc.
HERE IS THE CODE IM USING
screenshot.
What I think the problem is, is that my inline scripts loads before the widget scripts finish renders the the schedule html.
I know it is possible because this site uses the same widget and their signup opens the link in a overlay frame on the same page.
Please shed some light on this.
UPDATE:
<html>
<head>
<title>Test</title>
</head>
<body>
<iframe id="openViewHere" width="500px" height="500px" src="" ></iframe>
<script type="text/javascript">
healcode_widget_id = "7696499e81";
healcode_widget_name = "schedules";
healcode_widget_type = "mb";
document.write(unescape("%3Cscript src='https://www.healcode.com/javascripts/hc_widget.js' type='text/javascript'%3E%3C/script%3E"));
// Healcode Schedule Widget for Iyengar Yoga Association of Greater New York : Brooklyn Daily Class Schedule
</script>
<noscript>Please enable Javascript in order to get HealCode functionality</noscript>
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".signup_now").click(function(){
var url = $(this).attr("href");
$("#openViewHere").attr("href",url);
return false;
});
</script>
</body>
</html>
Just use this code :
$( document ).ready(function(){
$("body").on('click',".signup_now",function(e){
$(this).attr("target","_self")
})
})
be aware that windows.ready() might fire , while the widget script is still adding elements dynamicaly that is why the listeners dont work , you have to access the element through already loaded parent ( e.g "body" ).
I've built a webpage that is basically a main-page with a div that is filled with different pages by using AJAX. This basically works by loading pages into a div by using innerHTML. One problem I ran into was when a page with javascript is loaded into that div all of the other code runs fine; just the javascript doesnt work.
Main-page(index.php):
<html>
<head>
<script type="text/java">
////bunch of functions////
////Ends up that page_request on this instance is 'graph.php'////
document.getElementById('mydiv').innerHTML=page_request.responseText
</script>
</head>
<body>
<div id="mydiv"><div>
</body>
</html>
Child-page(loaded in div(graph.php)):
<html>
<head>
<link rel="stylesheet" href="mystyle.css" type="text/css" media="screen" />
<script src="other_stuff.js"></script>
</head>
<body>
<script>
///bunch of script////
</script>
</body>
</html>
Now when loading the page itself (opening graph.php) I notice that everything works fine; it is just when I import graph.php to index.php through innerHTML into my div it does not work (no errors just nothing is shown). I have read through many other posts and guides and did not come up with any distictive solution; thinks I have seen were:
Put eval() around my code [I saw on a guide that this could lead
to malicious user attacks].
Create the scripts on the main page then just import the data using:
document.createElement() and .parentNode.insertBefore()
Create a listener and call the functions when I open graph.php
And this good example
Even though I am not 100% sure how this example could work because I have php populate information for the javascript to collect and then make my graph on graph.php; so if I put that function into index.php the php will already be loaded so I would have to refresh the page or call them to update information somehow. Just for some context I am ok at php but I am new and struggle with javascript so I do not know what solution would fit my situation or work the best. Any tips/examples would be greatly appreciated, thank you for your time.
From you code snippets it seems you're looking to embed complete pages within the main page. If that's the case, a more straightforward approach would be to use an iframe element instead.
For example:
...
<div id="main-page-container">
<iframe src="some-path/graph.php" scrolling="no" frameborder="no"></iframe>
</div>
...
See reference and usage example.
I would suggest using jQuery's .load() function for this.
Take a look here: jQuery API
Older browsers such as IE8 and below don't allow you insert a string that contains javascript and execute it, in any form.
Take for instance:
function addScriptText(js_code) {
var element = document.createElement("script");
element.innerHTML = js_code;
document.head.appendChild(element);
}
will not work in IE8 and below.
You must use eval to accomplish this:
function addScriptText(js_code) {
window.eval.call(window, js_code);
}
Otherwise you need to dynamically request an external js file such as:
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "externalScript.js";
document.getElementsByTagName("head")[0].appendChild(script);
Note: The page you are loading (page2.html in this example) must be on the same domain as the page that is loading it (page1.html in this example)
Working solution with jQuery:
Page 1:
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#page2").load("page2.html");
});
</script>
</head>
<body>
<h1>Page 1 Header</h1>
<div id="page2">
</div>
</body>
</html>
Page 2:
<h2>Page 2 Header</h2>
<script type="text/javascript">
alert("Page 2 loaded and javascript executed!");
</script>
I have a master page Root.master and a page default.aspx . I want to display progress bar until whole default.aspx page is loaded .
I tried following code:-
<html>
<head><title>xx</title>
</head>
<body style="visibility:hidden;" onload="function(){document.body.visibility='visible'}">
<img src="xxxx.gif" style="visibility:visible !important">
</body>
</html>
But problem is that I do not have body on default.aspx , it is on root.master , if we put it on root.master, it apply all pages which inherit from root.master .
So there is another for it .
Please suggest me usable link or samples.
in your sample if you are using jQuery, you can use following re-factoring to your code
$(document).load(function(){
$('body').css('visibility','visible');
}
You can add a reference to jQuery and then do a little code something like:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(){ // Wait until the page has finished loading
if ($(".ProgressBar")) // Detect the element with class ProgressBar
{
$(".ProgressBar").hide(); // If found, set it to be display:none;
}
}
</script>
</head>
<body>
<div class="ProgressBar">
<img src="Whatever.gif" alt="Please wait..." />
</div>
</body>
</html>
Also doable without jQuery but it's just so much easier to use it ;)
That way the progress bar gif loads, and once the page is done it is set to invisible.
I hope that might help! Good luck.
You don't mention any libraries, so here is a pure js solution:
http://jsfiddle.net/TTU7v/
The idea is to put the script as close to the opening body tag (but after it!) as possible:
<script type="text/javascript">
var body = document.getElementsByTagName("body")[0];
body.style.visibility = "hidden";
window.onload = function(){body.style.visibility = "visible";};
</script>