How to parse a web page from a local javascript file - javascript

I need to parse a content that is dynamically generated by a javascript from a remote page.
For example, I need to get the price from this page: http://www.alibaba.com/product-detail/BRG-Newest-Fashional-Protective-Case-For_1666645206.html#J-wrapper
but the price is generated by a javascript, so when I download the page with ajax, it downloads only the html file without the results of the scripts.
So I tried to embed in the background an iframe and then parse the document inside this iframe, but there is a security issue that doesn't let me parse it.
Do you know if there is another way I can do it?
The function that I use is this:
$.ajax({
url: url,
dataType: 'text',
success: function(html, _, xhr) {});
but the resulting HTML is without the scripts information, so the price is empty.
I tried to use also:
<html lang="en">
<head>
<meta charset="utf-8">
<title>contents demo</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<iframe src="http://api.jquery.com/" width="80%" height="600" id="frameDemo"></iframe>
<script>
document.getElementById("frameDemo").onload = function() {
var contents = $( "#frameDemo" ).contents();
}
</script>
</body>
</html>
but I get this error:
Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement':
Blocked a frame with origin "null" from accessing a frame with origin "api.jquery.com".
The frame requesting access has a protocol of "file", the frame being accessed has a protocol of "http".
Protocols must match.

Instead of using an iframe, try using a chrome app webview. It will run in a segregated container without the restrictions you referenced. But you can still communicate with it.

Related

Using jQuery to fetch information from iframe from different domain

I'm doing a site that fetches the stock property from a site and show it on my site.
But i'm having issue in displaying the it.
Here's the code :
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<iframe id="frame3" src="http://www.stockpart.net" sandbox="allow-forms allow-scripts allow-same-origin " style="visibility : hidden "></iframe>
<script>
$(document).ready ( function(){
$('#frame3').contents().find('.addClassClose').show();
});
</script>
I'm getting the following errors :
AD BLOCK NOT DETECTED
pop.js:1 rt():in true false tabunder 2
pop.js:1 rt():adv.bind http://serve.popads.net/servePopunder.php?cid=242978
pop.js:1 Uncaught SecurityError: Blocked a frame with origin "http://stockpart.net" from accessing a frame with origin "http://www.example.com". Protocols, domains, and ports must match.
Anyway is there anyway i can fetch information with the other site class/id using jQuery within an iframe?
I found the answer on the post posted by Patrick Evans with some modifications.
<?php
$homepage = file_get_contents('http://stockpart.net');
echo $homepage;
?>
Then put the iframe on the main page to get the stock information

Loading a text file through AJAX gives restricted URI error

I mentioned i read the suggested link ...and Could not able to understand the
suggestion .."Use Greasemonkey to modify Pages and start writing some
javascript to modify a web page
I am loading a text file with $.ajax. When running the code on Firefox, I get the following error:
Error: ["Access to restricted URI denied" code: "1012" nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)" location: "<unknown>"]
Here's my code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$.ajax({ url: "demo_test.txt",
success: function (result) {
$("#div1").html(result);
},
error: function (abc) {
alert(abc.statusText);
},
cache:false
});
return false;
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>
I've already read the following questions:
firefox reading web page from local JS file -- access to restricted URI denied, code: 1012, nsresult: NS_ERROR_DOM_BAD_URI
Error: [Exception... "Access to restricted URI denied" .... while calling $.ajax method
It was suggested that file system should not be used, so changed the URL to http://demo_test.txt, but that did not solve the issue.
I also heard that it might be because of a cross domain issue. If so, what exactly is meant by that, and how should I solve the problem?
Browser security prevents the code from running. You are better off running a local server such as IIS or Apache.
You can change your browser to run local content by changing a browser config
Firefox
Go to about:config
Find security.fileuri.strict_origin_policy parameter
Set it to false
I finally seems to Get it working . Here is working Script
$("button").click(function(){
$.ajax({url:"http://localhost/demo_test.txt",success:function(result){
$("#div1").html(result);
}});
});
Workaround : put the html file and text file on local server (IIS) New Site .

Retrieve the content of the JavaScript file

Using JavaScript, I want to retrieve the content of the script files. These script files remain in local(in web page).
For example.
In web page, there is a script,
<script src="tool.js"></script>
Latter, I want to get the content of tool.js and process the retrieved result (like dump its content).
I have tried to use jQuery.getScript. However, it tells me that Origin null is not allowed by Access-Control-Allow-Origin.
try an ajax like the following
$.ajax('/tool.js', {
type: 'GET',
crossDomain: true,
dataType: 'jsonp',
success: function(data) {
console.log(data);
},
error: function() {
console.log("call failed");
}
});
You need to configure your Access-Control-Allow-Origin:
Access-Control-Allow-Origin: *
This lets you use any resource to obtain assets from an external domain. Do this first and either Mahan's or Lars's solution will work.
More info:
Access-Control-Allow-Origin Multiple Origin Domains?
try using jquery.load() and put its contents on an element and use .html()
<html>
</head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
//setup ajax to work locally
$.ajaxSetup({
crossDomain: false,
isLocal :true
});
$("#a").load('jquery.js', function() {
alert($("#a").html());
});
});
</script>
</head>
<body>
<span id="a" style="display:none;"></span>
</body>
</html>
Browser Check:
the code above works and tested in FF, Safari, Opera and IE
but if you keep on having problem with Origin null is not allowed by Access-Control-Allow-Origin then having a web server installed is needed as said here; Origin null is not allowed by Access-Control-Allow-Origin
Reference:
http://api.jquery.com/load/
code for your disposal : http://jsfiddle.net/PeaH3/1/

how to call REST API from javascript

I have a url which gives json data...
I want to hit that URL from javascript but I am getting this error :
character encoding of the plain text document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the file needs to be declared in the transfer protocol or file needs to use a byte order mark as an encoding signature
Code :
function a(){
$.getJSON(url,function(data) { alert(data);});
}
full code :
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" ></meta>
<script language="JavaScript" type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script>
function a(){
$.getJSON(url,function(data) { alert(data);});
}
</script>
</head>
<body>
<input type="text"/>
<input type="submit" value="search" onclick="a()"/>
</body>
</html>
Your code seems correct.
Are you making a fully qualified URL call?
If you are making a fully qualified URL call, make sure of the following.
You are calling the same domain(same server). You can not make a
simple JSON call to another domain.
If you want to use a cross domain call, you'll have to use JSONp
Update:
This is not working since it is a cross domain call.
Work around for this
JavaScript
Create a function
function getMyData(data) {
alert(data);
//Do the magic with your data
}
Server side
On server end wrap your data inside function syntax
getMyData("Enter your data here");
JavaScript
Then create a script tag and add a link to your cross-domain page
<script type="text/javascript"
src="cross ref url">
</script>
For reference: wikipedia
EDIT: Another option is Create a proxy on your domain. ie create a page in your domain which internally calls the cross-domain page and return the same data to your Ajax call.

JavaScript window.opener call parent function

I am trying to call a javascript function defined in a parent from a child window. I have two files like this:
Parent:
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function foo () {
alert ("Hello from parent!");
}
function doStuff () {
var w = window.open("testa.html");
}
</script>
</head>
<body>
<input type="button" value="open" onClick="doStuff();" />
</body>
</html>
And child:
<html>
<head>
<title>Test A</title>
<script type="text/javascript">
function get() {
window.opener.foo();
}
</script>
</head>
<body>
<input type="button" value="Call Parent" onClick="get();" />
</body>
</html>
I can not, for the life of me, call the function foo from the child process. I thought this should be possible with the window.opener object, but I can not seem to make this work. Any suggestions?
Ensure you are accessing this via http:// so the Same origin policy passes and you can access opener from the child. It won't work if you're just using file://.
Answering Rahul's question:
Every browser can load pages from server or from local filesystem. To load file from local filesystem you should put to the browser the address like this file://[path], where [path] is the absolute path to the file in filesystem (including drive letter on Windows, see http://blogs.msdn.com/b/ie/archive/2006/12/06/file-uris-in-windows.aspx for details).
To load file from local HTTP server (if you have one) you should put to address something like this http://localhost:[port]/[path], where [port] is the port where your server is running (default is 80) and [path] is the path of the file relative to the server's document root folder. Document root folder depends on the server configuration.
So, as you see, the same local file can be loaded to the browser in two ways. There is however big difference between these two ways. In the first case the browser doesn't use HTTP protocol to load the file and therefore is missing many things necessary for different mechanisms to work properly. For example AJAX doesn't work with local files, as HTTP response status is not 200, etc.
In this particular example the browser security mechanism didn't get the origin information and was preventing from accessing the parent window.

Categories

Resources