I've looked and tried a BUNCH of different codes and can't figure this out.
What I'd like to do is add a search box on my page that loads a YouTube playlist based on the search query and plays it on an embedded player.
My Code:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript">
function go_get(){
var base_url = 'http://www.youtube.com/embed?listType=search&list=' ;
var search_field = document.getElementById('yourtextfield').text ;
var target_url = base_url + search_field ;
var ifr = document.getElementById('youriframe') ;
ifr.src = target_url ;
return false ;
}
</script>
<form onsubmit="go_get(); return false;" >
<input type="text" id="yourtextfield"/>
<input type="submit" value="Search Playlists" />
</form>
<iframe id="youriframe" width="640" height="360" ></iframe>
</body>
</html>
Result
The search box and player loads. However, the same playlist is loaded no matter what you search.
If I right-click on the video and view the embed HTML this is the result:
<iframe width="640" height="360" src="http://www.youtube.com/embed/6DYngiqZim0?
feature=player_embedded" frameborder="0" allowfullscreen></iframe>
As you can see the src has changed. Could YouTube maybe be preventing this behavior? Perhaps my URL is wrong?
Please Help!
Just change the "text" option with "value" on line 12
<html>
<head>
<title>Youtube playlist search</title>
</head>
<body>
<script type="text/javascript">
function go_get(){
var base_url = 'http://www.youtube.com/embed?listType=search&list=';
var search_field = document.getElementById('yourtextfield').value;
var target_url = base_url + search_field;
var ifr = document.getElementById('youriframe');
ifr.src = target_url;
return false;
}
</script>
<form onsubmit="go_get(); return false;" >
<input type="text" id="yourtextfield"/>
<input type="submit" value="Search Playlists" />
</form>
<iframe id="youriframe" width="640" height="360" ></iframe>
</body>
</html>
Change:
var search_field = document.getElementById('yourtextfield').text ;
to:
var search_field = document.getElementById('yourtextfield').value ;
Related
Halp!
I'm trying to write a web-crawler in python. The goal is to (eventually) loop through a list of domains, crawl all local-URLs within those domains, and dump all of the HTML content back to my host.
For now, I'm handing the script a single domain (http://www.scrapethissite.com). I've defined a queue, as well as sets for new/processed/local/foreign/broken-URLs. Based on the output, it looks like the script is reading in HTML of the page, grabbing the first local_URL ('https://scrapethissite.com/lessons/'), but failing to process that URL by adding it to the queue.
Ideally, the script would spit out each input URL's output into its own directory, preserving the DOM of the TLD. But I'd be happy just to get the queue working.
Here's my code:
from bs4 import BeautifulSoup
import requests
import requests.exceptions
from collections import deque
from urllib.parse import urlsplit, urlparse
from urllib.request import Request, urlopen
import requests
from html.parser import HTMLParser
import lxml
#set targets
url = 'https://scrapethissite.com'
new_urls = deque(([url]))
processed_urls = set()
local_urls = set()
foreign_urls = set()
broken_urls = set()
#process urls until we exhaust queue
while len(new_urls):
url = new_urls.popleft()
processed_urls.add(url)
print("processing %s..." % url)
try:
response = requests.get(url).text
print(response)
print(new_urls)
except(requests.exceptions.MissingSchema, requests.exceptions.ConnectionError, requests.exceptions.InvalidURL, requests.exceptions.InvalidSchema):
broken_urls.add(url)
print(("this %s failed") % url)
continue
##get base URL to differentiate local and foreign addresses
###not working
print("differentiating addresses...")
parts = urlsplit(url)
base = "{0.netloc}".format(parts)
strip_base = base.replace("www.","")
base_url = "{0.scheme}://{0.netloc}".format(parts)
path = url[:url.rfind('/')+1] if '/' in parts.path else url
#initialize soup
print("initializing soup...")
response = requests.get(url).text
soup = BeautifulSoup(response, 'lxml')
#get links in HTML
for link in soup.find_all('a'):
anchor = link.attrs["href"] if "href" in link.attrs else ''
#scrape page for links
print("scraping links...")
if anchor.startswith('/'):
local_link = base_url + anchor
local_urls.add(local_link)
elif strip_base in anchor:
local_urls.add(anchor)
elif not anchor.startswith('http'):
local_link = path + anchor
local_urls.add(local_link)
else:
foreign_urls.add(anchor)
print(forieng_urls)
print(local_urls)
#to crawl local urls
#...and add them to sets
for i in local_urls:
if not i in new_urls and not i in processed_urls:
new_urls.append(i)
#to crawl all URLs
#for i in local_urls:
#if not link in new_urls and not link in processed_urls:
#new_urls.append(link)
print("new urls: %s" % new_urls)
print("processed urls: %s" % processed_urls)
print("broken urls: %s" % broken_urls)
And here's the output:
(base) $ crawler % python3 bsoup_crawl.py
processing https://scrapethissite.com...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Scrape This Site | A public sandbox for learning web scraping</title>
<link rel="icon" type="image/png" href="/static/images/scraper-icon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A public sandbox for learning web scraping">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="/static/css/styles.css">
</head>
<body>
<nav id="site-nav">
<div class="container">
<div class="col-md-12">
<ul class="nav nav-tabs">
<li id="nav-homepage">
<a href="/" class="nav-link hidden-sm hidden-xs">
<img src="/static/images/scraper-icon.png" id="nav-logo">
Scrape This Site
</a>
</li>
<li id="nav-sandbox">
<a href="/pages/" class="nav-link">
<i class="glyphicon glyphicon-console hidden-sm hidden-xs"></i>
Sandbox
</a>
</li>
<li id="nav-lessons">
<a href="/lessons/" class="nav-link">
<i class="glyphicon glyphicon-education hidden-sm hidden-xs"></i>
Lessons
</a>
</li>
<li id="nav-faq">
<a href="/faq/" class="nav-link">
<i class="glyphicon glyphicon-flag hidden-sm hidden-xs"></i>
FAQ
</a>
</li>
<li id="nav-login" class="pull-right">
<a href="/login/" class="nav-link">
Login
</a>
</li>
</ul>
</div>
</div>
</nav>
<script type="text/javascript">
var path = document.location.pathname;
var tab = undefined;
if (path === "/"){
tab = document.querySelector("#nav-homepage");
} else if (path.indexOf("/faq/") === 0){
tab = document.querySelector("#nav-faq");
} else if (path.indexOf("/lessons/") === 0){
tab = document.querySelector("#nav-lessons");
} else if (path.indexOf("/pages/") === 0) {
tab = document.querySelector("#nav-sandbox");
} else if (path.indexOf("/login/") === 0) {
tab = document.querySelector("#nav-login");
}
tab.classList.add("active")
</script>
<div id="homepage">
<section id="hero">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<img src="/static/images/scraper-icon.png" id="townhall-logo" />
<h1>
Scrape This Site
</h1>
<p class="lead">
The internet's best resource for learning <strong>web scraping</strong>.
</p>
<br><br><br>
<a href="/pages/" class="btn btn-lg btn-default" />Explore Sandbox</a>
<a href="/lessons/" class="btn btn-lg btn-primary" />
<i class="glyphicon glyphicon-education"></i>
Begin Lessons →
</a>
</div><!--.col-->
</div><!--.row-->
</div><!--.container-->
</section>
</div>
<section id="footer">
<div class="container">
<div class="row">
<div class="col-md-12 text-center text-muted">
Lessons and Videos © Hartley Brody 2018
</div><!--.col-->
</div><!--.row-->
</div><!--.container-->
</section>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha256-Sk3nkD6mLTMOF0EOpNtsIry+s1CsaqQC1rVLTAy+0yc= sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pnotify/2.1.0/pnotify.core.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/pnotify/2.1.0/pnotify.core.min.css" rel="stylesheet" type="text/css">
<!-- pnotify messages -->
<script type="text/javascript">
PNotify.prototype.options.styling = "bootstrap3";
$(function(){
});
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<!-- golbal video controls -->
<script type="text/javascript">
$("video").hover(function() {
$(this).prop("controls", true);
}, function() {
$(this).prop("controls", false);
});
$("video").click(function() {
if( this.paused){
this.play();
}
else {
this.pause();
}
});
</script>
<!-- insert google analytics here -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41551755-8', 'auto');
ga('send', 'pageview');
</script>
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '764287443701341');
fbq('track', "PageView");</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=764287443701341&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
<!-- Google Code for Remarketing Tag -->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 950945448;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/950945448/?guid=ON&script=0"/>
</div>
</noscript>
<!-- Global site tag (gtag.js) - Google AdWords: 950945448 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-950945448"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'AW-950945448');
</script>
</html>
deque([])
differentiating addresses...
initializing soup...
scraping links...
new urls: deque(['https://scrapethissite.com/lessons/', <a class="btn btn-lg btn-primary" href="/lessons/"></a>])
processed urls: {'https://scrapethissite.com'}
broken urls: set()
I need to make my button click to reveal the textarea so the user can choose between uploading either an image or a text message. I can see the hidden/visible element kicking in when I run the page but it doesn't remain in the new state. It immediately reverts back to whatever it was originally set as.
I'm guessing that I'm not escaping the script properly. Any thoughts?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Site Media</title>
</head>
<header id="headtitle">
</header>
<body>
<div id="PostContainer"><br>
<textarea id="textmessage" rows="7" cols="40" maxlength="280" placeholder="Enter message here..." width="100%" style="visibility: hidden"></textarea><br>
<form class="UploadButtonContainer">
<button id="textbutton" type="submit" name="submit" onclick="revealinput()" style="display: none;"></button>
<label for="textbutton" style="cursor: pointer;" ><img src="Images/AYE PING.png" width="30%" alt="Choose Text Post" >
</label>
</form>
<script>
function revealinput() {
var x = document.getElementById("textmessage");
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}
</script>
</div>
</body>
</html>
The script didn't like the button being inside a tag. I changed it to a tag and it works now.
I inspected this Manga Page and got this image link.
I tried using curl command to download the image but it returned html data instead.
Command i used : curl https://images.mangafreak.net/mangas/hajimete_no_gal/hajimete_no_gal_45/hajimete_no_gal_45_18.jpg
Returned data :
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Entering Mangafreak...</title>
<style type="text/css" >h1,p{color:#404040;text-align:center}#myDiv,#myDiv1,h1,p{text-align:center}body,html{width:100%;height:100%;margin:0;padding:0}body{background-color:#fff;font-family:Helvetica,Arial,sans-serif;font-size:100%}h1{font-size:1.5em}p{font-size:1em;margin:10px 0 0}#myDiv1{display:none}img{max-width:100%;height:auto;width:auto}</style>
<script type="text/javascript">
//<![CDATA[
(function(){
var a = function() {try{return !!window.addEventListener} catch(e) {return !1} },
b = function(b, c) {a() ? document.addEventListener("DOMContentLoaded", b, c) : document.attachEvent("onreadystatechange", b)};
b(function(){
var a = document.getElementById('cf-content');a.style.display = 'block';
setTimeout(function(){
var s,t,o,p,b,r,e,a,k,i,n,g,f, xDznyGO={"wN":+((!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+[])+(+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![])+(+[])+(!+[]+!![]+!![]+!![])+(!+[]+!![])+(!+[]+!![]+!![]+!![])+(!+[]+!![]+!![]))/+((!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+[])+(!+[]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]))};
g = String.fromCharCode;
o = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
e = function(s) {
s += "==".slice(2 - (s.length & 3));
var bm, r = "", r1, r2, i = 0;
for (; i < s.length;) {
bm = o.indexOf(s.charAt(i++)) << 18 | o.indexOf(s.charAt(i++)) << 12
| (r1 = o.indexOf(s.charAt(i++))) << 6 | (r2 = o.indexOf(s.charAt(i++)));
r += r1 === 64 ? g(bm >> 16 & 255)
: r2 === 64 ? g(bm >> 16 & 255, bm >> 8 & 255)
: g(bm >> 16 & 255, bm >> 8 & 255, bm & 255);
}
return r;
};
t = document.createElement('div');
t.innerHTML="<a href='/'>x</a>";
t = t.firstChild.href;r = t.match(/https?:\/\//)[0];
t = t.substr(r.length); t = t.substr(0,t.length-1);
a = document.getElementById('jschl-answer');
f = document.getElementById('challenge-form');
;xDznyGO.wN*=+((!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+[])+(!+[]+!![])+(+[])+(!+[]+!![]+!![]+!![])+(+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![])+(!+[]+!![]+!![]))/+((!+[]+!![]+[])+(!+[]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]));xDznyGO.wN-=+((!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+[])+(!+[]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![])+(+[])+(!+[]+!![]+!![]))/+((!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+[])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![])+(!+[]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(+[])+(!+[]+!![]+!![]+!![]+!![]+!![]));xDznyGO.wN+=+((!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+[])+(!+[]+!![])+(+[])+(!+[]+!![]+!![]+!![])+(+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![])+(!+[]+!![]+!![]))/+((!+[]+!![]+!![]+[])+(!+[]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![])+(+[])+(!+[]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(+!![])+(!+[]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]));xDznyGO.wN-=+((!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+[])+(!+[]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![])+(+[])+(!+[]+!![]+!![]))/+((!+[]+!![]+[])+(!+[]+!![]+!![]+!![])+(+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![])+(+[])+(!+[]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![]));xDznyGO.wN-=+((!+[]+!![]+!![]+!![]+!![]+!![]+!![]+[])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![])+(+[])+(+[])+(!+[]+!![]+!![])+(!+[]+!![]+!![]+!![])+(!+[]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]))/+((!+[]+!![]+!![]+[])+(!+[]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![])+(+[])+(!+[]+!![]+!![]+!![])+(+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]));xDznyGO.wN-=+((!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+[])+(!+[]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(+[])+(!+[]+!![]+!![]+!![])+(+!![])+(!+[]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]))/+((!+[]+!![]+!![]+!![]+[])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(+!![])+(!+[]+!![]+!![]+!![]+!![])+(+!![])+(!+[]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![]));xDznyGO.wN-=+((!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+[])+(!+[]+!![])+(+[])+(!+[]+!![]+!![]+!![])+(+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![])+(!+[]+!![]+!![]))/+((!+[]+!![]+!![]+!![]+!![]+[])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![])+(!+[]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![])+(+[]));xDznyGO.wN*=+((!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+[])+(!+[]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![])+(+[])+(!+[]+!![]+!![]))/+((!+[]+!![]+!![]+!![]+!![]+[])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(+!![])+(!+[]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+!![])+(!+[]+!![]+!![]));a.value = (+xDznyGO.wN + t.length).toFixed(10); '; 121'
f.action += location.hash;
f.submit();
}, 4000);
}, false);
})();
//]]>
</script>
</head>
<body>
<table width="100%" height="100%" cellpadding="20">
<td align="center" valign="middle">
<div id="myDiv1"><div class="cf-browser-verification cf-im-under-attack">
<noscript><h1 data-translate="turn_on_js" style="color:#bd2426;">Please turn JavaScript on and reload the page.</h1></noscript>
<div id="cf-content" style="display:none">
<div>
<div class="bubbles"></div>
<div class="bubbles"></div>
<div class="bubbles"></div>
</div>
<h1><span data-translate="checking_browser">Checking your browser before accessing</span> mangafreak.net.</h1>
<p data-translate="process_is_automatic">This process is automatic. Your browser will redirect to your requested content shortly.</p>
<p data-translate="allow_5_secs">Please allow up to 5 seconds…</p>
</div>
<form id="challenge-form" action="/cdn-cgi/l/chk_jschl" method="get">
<input type="hidden" name="s" value="6977b7c5689e60d0637e781cc9d42b048667542c-1564646132-1800-AT6wnbzFcJ7/IWIZ7MeJA7CHxZgNogpaJiSlrZjpDR9uZt3xLsJEs3LJzVfvvdfvNDetfDL70qQB0SvIwtGURGtXqF8VwI7PTpj2eeDBPB273Ff3+X3mLUXPommEBIx+cI8i4HRVM0H2tPIdP98ZbNUmDKRFDoLsSU5rDYt9r1+fN7YY9OwXDQN8wgsNBR/lNbwn3Ugr2nFTQzNNBtCSIjU="></input>
<input type="hidden" name="jschl_vc" value="38d158d1174811116b7423d15274558d"/>
<input type="hidden" name="pass" value="1564646136.76-AFFAHwDTSK"/>
<input type="hidden" id="jschl-answer" name="jschl_answer"/>
</form>
</div>
</div>
<div id="myDiv">
<h1>Entering Mangafreak...</h1>
<img src="data:image/gif;charset=binary;base64,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">
<p>Please wait while we make things better for you.</p>
</div>
</td></table></body>
</html>
I don't understand why is this happening. Am i missing something? or does the https protocol has anything to do with it?
Please, any help will be appreciated :)
I'm not able to comment your post so I'm writing the reply. I wanted to do the same thing with PHP and curl. Seeing your post I decided to dig deeper.
I've just checked the HTML code and I think that it isn't the page's code that redirects you but rather it's the server. JS creates a timeout function that submits a form which contains hidden fields with encrypted data, I presume it's used on the server-side to determine where you should be redirected.
Is there a way to programmatically convert a SVG string in a PNG file using VB6 code without using inskape or others command line tools?
EDIT: Some details, this conversion could be performed in the IE web browser control but all examples with canvas works perfectly with firefox or chrome but not in IE (9-10-11), it's a known bug but not corrected.
My program is not a web client and I would like to perform this conversion directly in VB6, severals programs manage to convert SVG to PNG, it is so complex to perform this conversion?
Maybe you can use the following example. It loads an .svg file from your computer into canvas then converts it to .png using FileReader and dataURL.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Convert SVG to Canvas to PNG dataURL</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style='padding:10px;font-family:arial'>
<center>
<h4>Convert SVG to Canvas to PNG dataURL</h4>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'>
This is a utility used to convert files on your computer from SVG to a PNG dataURL
<br /><i>NOTE; This works in FF/CH. IE throws a security error</i>
</div>
<table><tr>
<td>
<div id=drawImgDiv>
</div>
<center>1.) canvas drawImage (svg)</center>
</td>
<td>
<div>
<canvas id=myCanvas></canvas>
</div>
<center>2.) Canvas</center>
</td>
<td>
<img id=pngImg />
<center>3.) PNG</center>
</td>
<tr><td colspan=3 align=center>
<input title="file to DataURL" onChange=loadSVGFile() type="file" id="ImgFile" />
</td></tr>
</tr></table>
<br />PNG dataURL: width="<span id=imgWidthSpan></span>" height="<span id=imgHeightSpan></span>" <br />
<textarea id=pngDataURLValue style='font-size:110%;font-family:lucida console;width:90%;height:200px'></textarea>
<br />
<br />Javascript:<br />
<textarea id=jsValue style='border-radius:26px;font-size:110%;font-weight:bold;color:midnightblue;padding:16px;background-color:beige;border-width:0px;font-size:100%;font-family:lucida console;width:90%;height:400px'></textarea>
</center>
<script id=myScript>
var Reader = new FileReader();
//---file onChange---
function loadSVGFile()
{
drawImgDiv.innerHTML=""
var imgFile = ImgFile.files[0]; // ---FileList objec
//--Only process image files---
if (imgFile.type.match('image.*'))
{
//---Closure to capture the file information---
Reader.onload = (function(theFile)
{
return function(e)
{
drawImgDiv.innerHTML += ['<img id=drawImage src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
drawImage.onload = function()
{
myCanvas.width=drawImage.width
myCanvas.height=drawImage.height
var ctx = myCanvas.getContext( "2d" );
ctx.drawImage(drawImage, 0, 0 );
var canvasdata = myCanvas.toDataURL("image/png");
pngImg.src = canvasdata
pngDataURLValue.value=canvasdata
imgWidthSpan.innerHTML=drawImage.width
imgHeightSpan.innerHTML=drawImage.height
}
};
})(imgFile);
//---Read in the image file as a data URL---
Reader.readAsDataURL(imgFile);
}
}
</script>
<script>
document.addEventListener("onload",init(),false)
function init()
{
jsValue.value=myScript.text
}
</script>
</body>
</html>
I'm trying example from this site. It works fine. But if i separate views,models,routers into separate file it gives me a problem. There is 3 views. WineList view, WineListItemView and winedetails view. WineList view takes collection of wine models as model and winelistItem and winedetails view takes wine as a model.
Router's code is like this
var app = app || {};
app.AppRouter = Backbone.Router.extend({
routes:{
"":"list",
"wines/:id":"wineDetails"
},
initialize:function () {
$('#header').html(new app.HeaderView().render().el);
},
list:function () {
this.wineList = new app.WineCollection();
this.wineListView = new app.WineListView({model:this.wineList});
this.wineList.fetch();
$('#sidebar').html(this.wineListView.render().el);
},
wineDetails:function (id) {
if(this.wineList == undefined)
{
this.wineList = new app.WineCollection();
this.wineListView = new app.WineListView({model:this.wineList});
this.wineList.fetch();
$('#sidebar').html(this.wineListView.render().el);
}
this.wine = this.wineList.get(id);
if (app.router.wineView) app.router.wineView.close();
this.wineView = new app.WineView({model:this.wine});
$('#content').html(this.wineView.render().el);
}
});
On page load it fetches models from server and displays list of wines in sidebar div of page. When i click on particular wine item its details will be displayed in content div of page. That all works fine. But when i reload that page which now contains details of particular,wine model of Winedetails view gives undefined .
I'm intializing the router on main page like this
app.js
var app = app || {};
$(function() {
})
app.router = new app.AppRouter();
Backbone.history.start();
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Backbone Cellar</title>
<link rel="stylesheet" href="../css/styles.css" />
</head>
<body>
<div id="header"><span class="title">Backbone Cellar</span></div>
<div id="sidebar"></div>
<div id="content">
<h2>Welcome to Backbone Cellar</h2>
<p>
This is a sample application part of of three-part tutorial showing how to build a CRUD application with Backbone.js.
</p>
</div>
<div>
Next page
</div>
<!-- Templates -->
<script type="text/template" id="tpl-header">
<span class="title">Backbone Cellar</span>
<button class="new">New Wine</button>
</script>
<script type="text/template" id="tpl-wine-list-item">
<a href='#wines/<%= id %>'><%= name %></a>
</script>
<script type="text/template" id="tpl-wine-details">
<div class="form-left-col">
<label>Id:</label>
<input type="text" id="wineId" name="id" value="<%= id %>" disabled />
<label>Name:</label>
<input type="text" id="name" name="name" value="<%= name %>" required/>
<label>Grapes:</label>
<input type="text" id="grapes" name="grapes" value="<%= grapes %>"/>
<label>Country:</label>
<input type="text" id="country" name="country" value="<%= country %>"/>
<label>Region:</label>
<input type="text" id="region" name="region" value="<%= region %>"/>
<label>Year:</label>
<input type="text" id="year" name="year" value="<%= year %>"/>
<button class="save">Save</button>
<button class="delete">Delete</button>
</div>
<div class="form-right-col">
<img height="300" src="../pics/<%= picture %>"/>
<label>Notes:</label>
<textarea id="description" name="description"><%= description %></textarea>
</div>
</script>
<!-- JavaScript -->
<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/underscore.js"></script>
<script src="js/lib/backbone.js"></script>
<script src="js/models/WineModel.js"></script>
<script src="js/collections/WineListCollection.js"></script>
<script src="js/Views/WineListView.js"></script>
<script src="js/Views/WineListItemView.js"></script>
<script src="js/Views/WineDetailsView.js"></script>
<script src="js/Views/HeaderView.js"></script>
<script src="js/routers/routers.js"></script>
<script src="js/app.js"></script>
</body>
</html>
I'm new to this backbone technology. please tell me what am i missing
this.wineList.fetch();
fires an asynchronous request to your server, which means that the content will arrive (or not) at some point after executing this line, but your application execution continues whether the response arrived or not. On page reload (assume you have wines/:id in the URL) first you have to fetch the complete list of wines before accessing any particular wine from the collection.
You have to wait until is download the collection, and access the wine with id, after this request is finished.
So after initiating the request continue your application logic in the success callback:
this.wineList.fetch({
success: function(model) {
...
this.wine = model.get(id);
...
}
});