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."
Related
I have a JavaScript code that I got from the site: http://www.micahcarrick.com/change-image-with-jquery.html I only modified the name of the images as to use .png files I have. The issue is if I open this in a web browser locally, then when I click on one of thumbnails called django.gif I am directed to the actual image rather then the new image replacing the other. However, if I put this .html script on a Godaddy.com website and go to it with the same web browser it does work correctly just like the original site: http://www.micahcarrick.com/code/jquery-image-swap/index.html . I notice that at the site I got this code from the author mentions that "The thumbnails are links to full size versions of the images. If a user does not have JavaScript, the links still go to the large image." Does this mean I don't have Java Script? I can run other simple JavaScript codes locally. Why does this work when I put it on a site, but does not work when testing locally, even when using the exact same web browser? Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example: Change Image with jQuery</title>
<style type="text/css">
body { width: 600px; margin: auto; }
#imageWrap {
width: 640px;
height: 420px;
background: url('ajax-loader.gif') center center no-repeat;
}
</style>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.thumbnail').live("click", function() {
$('#mainImage').hide();
$('#imageWrap').css('background-image', "url('ajax-loader.gif')");
var i = $('<img />').attr('src',this.href).load(function() {
$('#mainImage').attr('src', i.attr('src'));
$('#imageWrap').css('background-image', 'none');
$('#mainImage').fadeIn();
});
return false;
});
});
</script>
</head>
<body>
<h1>Example: Change Image with jQuery</h1>
<p>
Main image is replaced using jQuery when a thumbnail is clicked. See full
description at <a
href="http://www.micahcarrick.com/change-image-with-jquery.html">Change
Image with jQuery</a>
</p>
<a href="bidu.png" class="thumbnail"><img src="django.gif"
alt="Image 1"/></a>
<a href="athex.png" class="thumbnail"><img src="django.gif"
alt="Thumbnail 2"/></a>
<div id="imageWrap">
<img src="bidu.png" alt="Main Image" id="mainImage"/>
</div>
</body>
</html>
Thank you,
Tom
This line right here is what's causing your issues:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
The "//" before the URL tells the browser to use the same protocol as the page is, and when running locally, the protocol is going to be "file:" which the browser will use to look into your local drive to find the jquery library (which it won't find, thus breaking the page). To fix this, prepend "http:" or "https:" to the URL so it looks like
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
I see two problems.
1. Your script tag src attribute for jQuery will not locate the correct resource. Running locally, this syntax (//ajax...) will resolve as file:///ajax.googleapis.com/..., which is not where jQuery is. Try putting a http:// or https:// in front of it.
2. You're using a deprecated jQuery function. .live() is not in version 1.6.2 - you need to use .on() instead, like so:
$(".thumbnail").on("click",function() { ... });
That should work.
Hope this helps.
change the src of the script tag to include the http: protocol
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"
<script type="text/javascript">
function printDoc() {
document.getElementById("frame_singleCheque").contentWindow.print();
}
</script>
<iframe style ="height:400px; width: 750px; overflow:scroll;" id="frame_singleCheque" src="http://www.w3schools.com"></iframe>
<input type="button" id = "btnCPrint" value = "Print" onclick="javascript:printDoc()" />
Error
[16:41:44.054] Error: Permission denied to access property 'print' # http://localhost/pdf/print.php:3
i have verified with lot of stack suggested threads for print iframe content. but for me those are not worked.
Exactly above code only present in my print.php file. i want to print the iframe content.
Also i want to know, how to print the specific div which is present inside the iframe. example in this iframe " class = 'example_code notranslate' " .
You can print a cross-domain iframe page perfectly by nesting the cross domain iframe in a locally hosted iframe. A "proxy iframe".
This way the parent javascript can print the proxy iframe without issue since it's local, which will transitively print it's inner iframe originating from another domain.
This technique works and has been verified by myself.
In your container page, host the iframe like this
<iframe id="printf" name="printf" class="A4" src="/SomeController/IFrameProxy?url=TARGETURL"></iframe>
The proxy iframe should look like something like this
#model string
<html>
<head>
<title>IFrame Proxy</title>
<style>
html, body, iframe {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
border-style: none;
}
</style>
</head>
<body>
<iframe src="#Model" seamless></iframe>
</body>
</html>
The javascript that prints the iframe (defined on container page) should look something like this:
function printFrame() {
var frm = document.getElementById("printf").contentWindow;
frm.focus();// focus on contentWindow is needed on some ie versions
frm.print();
}
It look like you've got a pretty standard cross-domain iframe issue here - namely that browsers are designed so you can't do this. There's a lot of fudges I could suggest, but largely, iframes are the wrong solution to this problem.
Basically, your best bet is to scrape the page - make a http request and parse out the content you want. Then you can interact with it as part of your own page's DOM.
How do I print an IFrame from javascript in Safari/Chrome
Print iFrame Content (#5)
Print contents of IFRAME from parent window
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
So my journey with this issue started when I initially was trying to asynchronously load a reddit social media widget. If you open the URL in the getScript parameter below you'll notice that this does a direct document.write. If I didn't didn't capture that code, it would have rewritten the entire document when I run .getScript.
var content = '';
document.write = function(s) {
content += s;
};
$.getScript('http://www.reddit.com/domain/skattertech.com/new/.embed?limit=4&t=all&sort=new&style=off', function(){
$('body').append(content);
});
The code above works, but despite the default async nature of .getScript, pairing it up with document.write causes my entire JS file to halt from running until it has the data to write. IF reddit's server is slow or doesn't respond, the rest of my other widgets won't load.
Is there any simple workarounds to solve this? Is it possible to fetch that script as a string to then split and pop the document.write wrapper off? If the only thing left is the HTML, I can easy write that in at anytime without affecting the rest of my script right?
Sahas, with your clever trick of overriding the document.write function, I don't see any delay at all in executing the following script:
<head>
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
document.write = function(s) {
$("body").append(s);
};
$(function() {
$.getScript('http://www.reddit.com/domain/skattertech.com/new/.embed?limit=4&t=all&sort=new&style=off');
$("#testDiv").fadeIn('slow');
});
</script>
<style type="text/css">
#testDiv
{
background-color: #0c0c0c;
color: #fff;
display: none;
}
</style>
</head>
<body>
<p>This is a test</p>
<div id="testDiv">
<p>This is a test.</p>
<p>This div won't be shown until after $.getScript() executes.</p>
<p>Blah blah blah.</p>
</div>
</body>
I executed it several times and, even if reddit was slow to respond, my
$("#testDiv").fadeIn('slow');
code executed well before reddit was finished sending my page back the script.
Am I missing the problem?
It is possible not to show html page in user browser until some JavaScript(built-in or in separate file) will be loaded and executed(for page DOM manipulation)?
The easiest thing to do is to set the css variable
display: none;
to the whole page.
then when everything is loaded you can set the display to
display: block; // or something else that suits.
If you make sure that piece of CSS is loaded at the very start of your document it will be active before any html is shown.
if you use a javascript library like jQuery you'll have access to the $(document).ready() function, and can implement a switch over like this:
<html>
<head>
<title>test</title>
<style type="text/css">
body > div {
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('body > div').css('display', 'block');
});
</head>
<body>
<div>
This will initially be hidden.
</div>
</body>
</html>
Not in the classical way you'd distribute a page. Browsers will (usually) start to display chunks of the base HTML file as it arrives.
Of course, you could simulate this by generating all the HTML on the fly from some included Javascript file. But that doesn't sound like a good plan as it will degrade horribly for people without JS enabled, or if you have a minor bug in your script. A better option might be to style the body tag to display: none and restyle it from the script to make certain parts visible again.
What is it you're actually trying to achieve? It sounds like there's likely to be a better way to do this...
Place the content of HTML page in a DIV, make its diplay none and on load of body diplay it.
<script type="text/javascript">
function showContent() {
var divBody=document.getElementById('divBody');
divBody.style.display= 'block';
}
</script>
<body onload="showContent()">
<div id="divBody" style="display: none;">
<--HTML of the page-->
</div>
</body>
Examples of what you might want to do:
Facebook's "BigPipe": http://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919
This method allows you to load JS first then ASYNC+inject all DOM content.
GMail
Zimbra (open-source web app similar to MS Outlook/Exchange)
My understanding is that you want to run some javascript code before you load the page. In the js file you write your init function and add the eventlistener to the window on "load" event. This will ensure that the init code gets executed first and then you can start displaying the HTML content.
var Yourdomain = {};
YourDomain.initPage = function(){
/* Your init code goes here*/
}
window.addEventListener("load", YourDomain.initPage, false);
All You really need to do is give your element an ID or CLASS and use the dislay: none; property. When your ready to show it just delete it.
CSS:
#div_1 {
display: none;
}
HTML:
<div id="div_1">
<p>This will be the hidden DIV element until you choose to display it.</p>
<p id="js_1"></p>
<script>
var x = "Some Test ";
var y = "Javascript";
document.getElementById("js_1").innerHTML = x + y;
</script>
</div>