I am trying to put the html source code for any webpage in a string using Javascript.
Please tell me if i can do something else to solve my problem..
I am using the following code that i found from another post
function httpGet(theUrl)
{
var xmlHttp = null;
xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", theUrl, false );
xmlHttp.send( null );
return xmlHttp.responseText;
}
I tried this in IE Firefox and Chrome but i always get the following source code which is the source code for "PAGE NOT FOUND" page..If you any other info please let me know in a comment..
What i am trying is to get html from any webpage like google.com and other webpages..If i can't do that then what can i do?
<!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" xml:lang="en" lang="en">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>404 - PAGE NOT FOUND</title>
<style type="text/css">
body{padding:0;margin:0;font-family:helvetica;}
#container{margin:20px auto;width:868px;}
#container #top404{background-image:url('http://74.53.143.237/images/404top.gif');background-repeat:no-repeat;width:868px;height:168px;}
#container #mid404{background-image:url('http://74.53.143.237/images/404mid.gif');background-repeat:repeat-y;width:868px;}
#container #mid404 #gatorbottom{position:relative;left:39px;float:left;}
#container #mid404 #xxx{float:left;padding:40px 237px 10px;}
#container #mid404 #content{float:left;text-align:center;width:868px;}
#container #mid404 #content #errorcode{font-size:30px;font-weight:800;}
#container #mid404 #content p{font-weight:800;}
#container #mid404 #content #banner{margin:20px 0 0 ;}
#container #mid404 #content #hostedby{font-weight:800;font-size:25px;font-style:italic;margin:20px 0 0;}
#container #mid404 #content #coupon{color:#AB0000;font-size:22px;font-style:italic;}
#container #mid404 #content #getstarted a{color:#AB0000;font-size:31px;font-style:italic;font-weight:800;}
#container #mid404 #content #getstarted {margin:0 0 35px;}
#container #bottom404{background-image:url('http://74.53.143.237/images/404bottom.gif');background-repeat:no-repeat;width:868px;height:14px;}
</style>
</head>
<body>
<div id="container">
<div id="top404"></div>
<div id="mid404">
<div id="gatorbottom"><img src="http://74.53.143.237/images/gatorbottom.png" alt="" /></div>
<div id="xxx"><img src="http://74.53.143.237/images/x.png" alt="" /></div>
<div id="content">
<div id="errorcode">ERROR 404 - PAGE NOT FOUND</div>
<p>Oops! Looks like the page you're looking for was moved or never existed.<br />Make sure you typed the correct URL or followed a valid link.</p>
<div id="banner">
<object width="728" height="90"><param name="movie" value="http://74.53.143.237/images/hg728x90.swf">
<embed src="http://74.53.143.237/images/hg728x90.swf?clickTAG=http://secure.hostgator.com/cgi-bin/affiliates/clickthru.cgi?id=page404" width="728" height="90"></embed>
</object>
</div>
<div id="hostedby">This site is hosted by HostGator!</div>
<div id="coupon">Build your website today for 1 cent! Coupon code: "404PAGE"</div>
<div id="getstarted"><a href="http://www.hostgator.com/?utm_source=internal&utm_medium=link&utm_campaign=page404" title="HostGator Web Hosting" >CLICK HERE TO GET STARTED</a></div>
</div>
<div style="clear:left;"></div>
</div>
<div id="bottom404"></div>
</div>
</body>
</html>
I am trying to put the html source code for any webpage in a string using Javascript
If by "any" you mean pages from origins other than the origin your document is served from, you can't do that from JavaScript running in a browser, because you're using an ajax call and those are restricted by the Same Origin Policy, which says that (for instance) script running in a document on http://stackoverflow.com can't use ajax to load content from http://example.com. (An "origin" is more than just the domain name, there are several aspects to it, see the link for details).
Some of the pages you might request (but probably very few) might support Cross-Origin Resource Sharing, in which case if they allow your origin (probably by allowing all origins), you could use ajax to load their content.
If you're running JavaScript outside the browser (NodeJS, SilkJS, RingoJS, Rhino, Windows Scripting Host, etc.), then the SOP wouldn't apply, but I suspect you'd probably need to use something other than the XMLHttpRequest object to do it.
But fundamentally, in a web page (not an extension/add-on) in a browser, you can't do that.
...but i always get the ... source code for "PAGE NOT FOUND" page
But that sounds like the URL is just wrong.
Related
I seek to run the following iframe object inside an HTA application and would like to later convert this to an exe file.
<iframe height="620" class="wizard-frame" style="max-width: 100% !important; border: 1px solid #dadada; overflow-y: hidden;" scrolling="no" src="https://www.rnv-online.de/timetable/?design=3&width=390&destination=" width="390"></iframe>
The appearance of the applicaiton should look as displayed here:
https://www.rnv-online.de/fahrtinfo/fahrplaene/fahrplanauskunfts-widget/
Here is the HTML Code I have come up with:
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<html>
<body>
<iframe
height="620"
class="wizard-frame"
style="max-width: 100% !important; border: 1px solid #dadada; overflow-y: hidden;" scrolling="no" src="https://www.rnv-online.de/timetable/?design=3&width=390&destination=" width="390"></iframe>
</body>
</html>
When I run the HTA file, I receive an error, which I can skip and get the asked widget. However, it is not interactive and I assume Javascript is an issue here. How can I get to work properly?
The page in the script does not work in IE 11 (e.g. calendar and clock do not work at all). If the page doesn't work in IE 11, it won't work in an HTA iframe either.
If you can find a page that actually works with IE 11, then the following information may be of use...
Even with the x-ua-compatible line in the HTA, the external site will get the mshta.exe default user agent header which is MSIE 7.0 by default. To ensure the external site gets an IE 11 header, apply this registry setting:
Windows Registry Editor Version 5.00
[HKEY_CURRENT_USER\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION]
"mshta.exe"=dword:00002af8
That will change the mshta.exe default mode from IE=7 to IE=11.
While this answer may appear to be a duplicate of other answers that refer to x-ua-compatible and the FEATURE_BROWSER_EMULATION registry value, I could not find any answers that made it clear that the x-ua-compatible setting does not carry over to the iframe. Here's a sample HTA script that demonstrates the issue:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=11">
</head>
<body>
<script>
window.resizeTo(850,650);
alert(document.documentMode + "\n\n" + window.navigator.userAgent);
</script>
<iframe width=800 height=550 src="https://gs.statcounter.com/detect"</iframe>
</body>
</html>
Chrome v75 appears to have introduced a bug whereby if you replace an iFrame's src programatically, it will replace the entire page instead of the iFrame.
This didn't happen on v74 and I can't get a test case to work (yet), it just fails in our site. (The site hasn't changed since going from v74 to v75, only Chrome has changed)
It appears to work fine the first time but then when you change it again (in our case viewing report drill downs) it causes the entire page (i.e. the iFrame's Parent) to load the src you were trying to load into the iFrame.
It also doesn't matter if you use pure Javascript or (in our case) JQuery, both cause the same issue.
EDIT: After a few hours detective work, I've found the bug. Setting the tag in the iFrame's content causes Chrome to load the iFrame's content into it's parent rather than the iFrame itself.
I've setup a Plunker account with a demo: https://plnkr.co/edit/UQ0gBY?plnkr=legacy&p=info
Just so I can post the link to Plunker, here is the code for the main file & the iframe content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function onLoaded() {
// find element
let button = document.getElementById("button");
button.addEventListener("click",function(e){
// Add a random number on the end as a cache buster
document.getElementById('frame-finance-custom').src = 'test2.html?rnd=' + Math.random();
},false);
};
document.addEventListener('DOMContentLoaded', onLoaded, false);
</script>
</head>
<body>
<div>IFrame Src Changing Test</div>
<div>
<div id="div-frame-finance-custom" style="float:left;width:33%">
<iframe id="frame-finance-custom" name="frame-finance-custom" class="iframe"
style="border:1px solid black; width: 100%; height: 350px; overflow-y: scroll; vertical-align: top;">
no data
</iframe>
</div>
<div style="float:left;margin-left:1em;">
Detail: Loading an iframe page with a <Base> tag in it with target set to "_parent" will cause any refresh of that frame to replace the parent document<BR>
<BR>Instruction: <UL><LI>Click the 'Update Frame' Button, this will load test2.html into the frame. <LI>Click it again & it will replace the iframe's parent with the content of the iFrame.</UL>
<BR>Confirmation: Remove the <Base> tag from the header of test2.html & reload, it will work as expected.
</div>
</div>
<br clear=both>
<div>
<button id="button">
Update Frame
</button>
</div>
</body>
</html>
IFrame Content (test2.html):
<!DOCTYPE html>
<html lang="en">
<head>
<base target="_parent"/>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>This is the frame content</div>
</body>
</html>
Note, using their new layout it doesn't work, but using their legacy layout it does. Feel free to save the files locally and use chrome directly too.
Ok, so this turned out to be a bug in Chrome rather than anything else, so yes, strictly not a SO question, but seeing as SO ranks so well in Google (other search engines are available), I thought it better to leave it here as a solution rather than simply delete it, just incase anyone else has a similar problem.
The reason is outlined as an edit in my question, the solution is to remove the <base target="_parent"> tag from the iFrame and programatically add the 'target="_parent"' attribute to any links in the iFrame.
We do this via jQuery, I'm sure its just as easy via vanilla Javascript.
$('a').attr('target','_parent');
Add that to the javascript that runs when a page has loaded and it'll replace add target="_parent" to any links on the page.
e.g.
<script>
function onLoaded() {
// find all links and add the target attribute
$('a').attr('target','_parent');
};
document.addEventListener('DOMContentLoaded', onLoaded, false);
</script>
As #Kaiido says in his comment, its apparently fixed in Chrome v77, but this isn't the current (as of June 2019) stable release, so we've had to add the workaround into production so that our CRM works with Chrome v75. Thanks to #Kaiido for confirming that.
I'm trying to get the content of iframe in a javascript alert but, the alert appears empty
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<style>
iframe {height:200px; width:300px; border:1px solid #000}
</style>
<script>
var iframe = document.getElementById("myFrame");
var iframe_contents = iframe.contentDocument.body.innerHTML;
function newDoc() {
alert (document.getElementById('myFrame').innerHTML) ;
}
</script>
<body>
<iframe src="http://api.adf.ly/api.php?key=c02fe2b360ee4b566a4f1e14d84b279b&uid=3141484&advert_type=banner&domain=adf.ly&url=http://somewebsite.com" id="myFrame">
</iframe><br>
</br>
<img src="http://www.giftworksconnect.com/wp-content/uploads/2012/10/download.png" width="100" onclick="newDoc(); return false;" style=" cursor: pointer;" border="0" id="adflink" />
</body>
</html>
any help would be appreciated
Regards
Edit:
I'm trying to get the contents of an IFRAME because I'm using Adf.ly
Api
"http://api.adf.ly/api.php?key=c02fe2b360ee4b566a4f1e14d84b279b&uid=3141484&advert_type=banner&domain=adf.ly&url=http://somewebsite.com"
But this api respond with a blank page with the shortend url I want to
use the shortened url directly in my site script
I guess your main (parent) page is on another domain. In this case your access to the iframe content is forbidden due to cross-domain restrictions.
If you don't have control over the inner page (api.adf.ly/api.php) you can't handle it on with the client-side code on your page.
replace Your below line
alert (document.getElementById('myFrame').innerHTML) ;
with the below
alert(document.getElementById('myFrame').src);
Think it will work for You.
I'm debugging a site on an Android HTC Sense. The site uses a lot of inserted content, which comes along with it's own CSS and JS like:
// wrapper id = snippet_id
<html>
<head>
<style type="text/css">
#snippet_id div {border: 1px solid red !important;}
div {border: 1px solid blue !important;}
</style>
</head>
<body>
<div>Hello World</div>
</body>
<html>
This is inserted into an existing page, so it sort these snippets are sort of like iFrames I guess.
Question:
Problem is, that while Javascript works fine, all CSS I'm specifying using <style> tags is being ignored. Any idea why?
EDIT:
Works on:
- Android 4.0.1
Does not work on:
- Android 2.3.1
- IOS 4.1
If I add the CSS to the main.css file being requested when the page loads, all is ok. If it's inside my gadget, it's not working.
EDIT:
So from what I can see, <style> does not seem to work on classes and id. If I use regular HTML elements as selectors it works.
EDIT:
My dev-site is here. I'm using a plugin called renderJs, which encapsultes HTML snippets (along with their CSS and JS) into resuable gadgets. Gadgets content will be appended to the page body, so although a gadget can act as a standalone HTML page, it can also be part of a page.
Example code from my page (I stripped out all gadgets but one below):
index.html - include index_wrapper gadget
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/Organization" lang="en" class="render">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/overrides.css">
<script data-main="../js/main.js" type="text/javascript" src="../js/libs/require/require.js"></script>
<title></title>
</head>
<body class="splash">
<div data-role="page" id="index">
<div id="index_wrapper" data-gadget="../gadgets/index_wrapper.html"></div>
</div>
</body>
</html>
The page has a gadget called index_wrapper link - code below:
<!DOCTYPE html>
<head></head>
<body>
<div id="index_social" data-gadget="../gadgets/social.html"></div>
<p class="mini t" data-i18n="gen.disclaimer"></p>
</body>
</html>
Which has another gadget called social here. This gadget includes some CSS, but on the devices in question, it is ignored (just saw, I'm missing a </div> in the index_wrapper, so trying to see if that fixed the problem, too).
The code below includes my fix:
<!DOCTYPE html>
<head>
<style type="text/css" scoped>
// will be ignroed
.el {width: 1px;}
.menu_social {text-align: center; margin: 1em 0;}
.action_menu {display: inline-block;}
.follow_us {display: inline-block; margin: 0; padding: 0 .5em 0 0;}
...
</head>
<body>
<div class="menu_social">
<div>
<span class="el ui-hidden-accessible"></span><!-- fallback for CSS not working -->
<div data-role="controlgroup" data-type="horizontal" data-theme="c" class="action_menu">
</div>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
(function () {
$(document).ready(function() {
var gadget = RenderJs.getSelfGadget();
// fallback for old devices which cannot load <style> css
if (gadget.dom.find(".el").css('width') !== "1px") {
require(['text!../css/social.css'], function (t) {
var x = '<style>'+t+'</style>';
gadget.dom.append(x);
});
}
// trigger enhancement
$(this).trigger("render_enhance", {gadget: gadget.dom});
});
})();
//]]>
</script>
</body>
</html>
So aside from probably missing a closing </div> I'm still wondering why my embedded CSS is not working.
Looking at the generated HTML code (i.e., code as modified by JavaScript) of the demo page suggests that style elements are generated inside body. Although such elements are allowed by HTML5 drafts when the scoped attribute is present, support to that attribute seems to be nonexistent, and the style sheet is applied globally. It is possible however that some browsers do not apply it at all, at least when the style element is dynamically generated.
A better approach is to make all style sheets global to the document, preferably as external style sheets, and use contextual selectors to limit the rules to some elements only. And possibly using JavaScript to change classes of elements, rather than manipulating style sheets directly.
Ok. Ugly workaround:
In the inline section, set this:
<style>
.el {width: 1px;}
</style>
In the page, set hide an element el like this:
// ui-hidden-accessible is a JQM class, moving the item out of view
// since it uses pos:absolute, is needed to not break
// selects on the page (compare to JQM ui-icon)
<span class="el ui-hidden-accessible"> </span>
Then check for the width when running inline Javascript (which works) and require the inline CSS as a separate file, when the width is not at 1px
// fallback for old devices which cannot load <style> css
// gadget is my iframe-look-a-like
if (gadget.dom.find(".el").css('width') !== "1px") {
require(['text!../css/translate.css'], function (t) {
var x = '<style>'+t+'</style>';
gadget.dom.append(x);
});
}
Ugly and an extra HTTP request, but at least the CSS is working then.
I have the folowing html. It passes the w3 validator, but my javascript alert does not work. Can anyone see any problems or have any suggestions on how to get it to work?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Company Name™</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
BODY {
background-image: url(images/bg4.jpg);
background-repeat:no-repeat;
background-position:center top;
background-attachment: fixed;
}
</style>
<script type="text/javascript">
alert("HELLO");
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="logo">
<img src="images/fcflogo.png" width="295" height="100" align="left" alt="logo"/>
</div>
<div class="header1">
100% Financial Protection
<hr/>
</div>
<div class="nav">Home| Flights| Hotels| Villas | CarHire| Attractions| Contact</div>
</div>
<div class="ver1">
<h2>Can't find what your looking for?</h2>
</div>
<div class="enq1">
<h2>Enquiry Form</h2>
</div>
<div class="hor1">
<h2>Our Service</h2>
<a>Company Name are one of the leading independent travel companies specialising in Florida Holidays. We have a wide range of major Charter and Scheduled airlines to choose from as well as over 10,000 Hotel and Villa deals. Our aim is to provide you the customer with a truly fantastic vacation in Florida from start to finish at affordable prices. We are not committed to any airline or Tour operator so are totally committed to finding you the best deal.</a>
</div>
<div class="hor1"><a>FLIGHTS</a></div>
<div class="ver2"><a>HOTELS</a></div>
<div class="ver2"><a>VILLAS</a></div>
<div class="hor1"><a>CAR HIRE</a></div>
<div class="hor1"><a>ATTRACTIONS</a></div>
</div>
<hr/>
<div id="footer"><a>FOOTER</a></div>
</body>
</html>
EDIT - To all below, I do have javascript turned on, I am using debian with firefox, noScript is disabled, but the alert does not appear, even if I move it to the body.
First, take out the trade mark. That extended characters is probably killing the closing </title> tag. I"m pretty sure that's your issue.
Failing that, remove every element above the <script> tag and see if it executes. If it does, restore each element one-by-one. Something above the script tag is preventing it from being parsed.
For me, your code works, the alert appears.
Have you enabled javascript in your browser?
Works fine on FF 3 and IE 8 for me.
Have you disabled JavaScript on your browser by any chance?
The script is never being invoked and that's why it is not alerting anything. Either move that script tag from within head to within body tag of the document. Or enclose it within a function and invoke it from onload attribute of body tag.
You might want to try clearing your cache to make sure that your browser is loading the file with the alert in it instead of an older, cached copy. If that doesn't work, I'd suggest trying it with Firefox/Firebug and checking for errors in the javascript console. If you're loading the file with AJAX, you'll need to move the script tag to the body of the document. Most of the time AJAX libraries will ignore the HEAD element and only include elements within the BODY tag.