I have dynamic forms in my urls .i want to write a javascript such that when the users paste that javascript in their web pages the form should dispay.
<script type="text/javascript">
window.location.href = "http://myserver/2a249ccf59e272abb8e7b8582560a45c"
</script>
The problem is using the above code , The url redirects.I want to avoid redirection
I'v tried iframes , but i dont want to use them as per requirements .
You need to use AJAX to fetch a remote page. You must get the page from the same server that your webpage was delivered from to avoid same origin policy issues.
I would recommend using a library to handle AJAX requests. jQuery has AJAX functions built in, but you could use others also. With jQuery...
// be sure to include jQuery library in the head of your document...
// general wrapper to execute code only after all page elements have loaded
$(function(){
$.get("http://myserver/2a249ccf59e272abb8e7b8582560a45c",function(data,status){
// put the fetched data (your html form) at the end of the existing body content
// you could put it somewhere else by changing the `body` selector
$("body").append(data)
})
})
Related
I am trying to write HTML code that hits a URL and fetches me it's page source i.e. the whole content which we see when we right click on the page and select the 'View Page Source' option.
I then want to process this content to extract some relevant values.
I have tried a few options on a W3schools TryIt Editor but nothing worked. I have tried for other URLs also, but no luck.
Can someone please tell if this is possible using HTML and JavaScript and if yes, how?
You can make an HTTP request using the Fetch API pretty simply:
const res = await fetch('https://example.com');
const html = await res.text();
However, this is only going to work for URLs that allow you to fetch their sources cross-origin. For security reasons, this isn't common. (If it were, most any other website could steal content from other sites you're logged into, such as your webmail or your bank!)
The only way around this is to proxy that data server-side where the cross-origin problem doesn't exist.
What it is the main purposes to fetch a different page into your page?
On another hand, did you try to use iframes?
https://www.w3schools.com/tags/tag_iframe.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
Note: In the end, you could fetch the page but you won't have control over js.
Suppose i have loaded some html data from ajax.
The ajax returned an an html form.
The issue arises when loading the resources in the loaded data. Let me elaborate..
For example, the ajax may receive a script tag referenced to "/script.js". But since my page would be on (let's say) a separate domain the browser wouldn't recognize the url "/script.js". So what I'm looking to do is replace all of the links like "/abc.xy" to be linking to the domain form which i'd be loading the resource originally..
So, all references like "/abc.xy" would be changed to "www.domain.com/abc.xy"
How would i achieve this? (if it is even possible)
function resolve(old,new){
[...document.getElementsByClassName("*")].forEach(el=>{
if(el.src){
el.src=el.src.replace(old,new);
}
if(el.href){
el.href=el.href.replace(old,new);
}
});
}
Use like this:
resolve("http://original.com/","http://new.com/");
I need to render a page without executing it's JavaScript (however inject my own script), showing the user how the page would look from a bot's POV.
So far I have thought of loading the page using ajax, removing all <script></script> tags from the loaded data, injecting my own <script></script> tags and replacing page html with the filtered data.
Are there any better ways of achieving this?
Maybe not a better way, but an alternative to using javascript to do what you want:
You can write a (php) server-side script, use file_get_contents() to get the original page contents, use php to remove and replace javascript page contents (str_replace, substr_replace, preg_match) then call this php script in an iframe.
See my related answer for more detail: https://stackoverflow.com/a/17262334/888177
<meta http-equiv="refresh" content="5; url=http://example.com/">
Meta refresh.
EDIT:
So, here's something you can do:
Check out this jquery plugin called fancybox.
What it does is, load remote url content into a neat popup div on the page. You can check if you can modify it's code to make it work how you want.
Also quick headsup: bots don't have cookies as well. So, stripping just script tags won't do. Also have to disable cookies in the request.
On my page, javascript adds a lot of classes on page load (depending on the page).
How can I wait til javascript has added those classes, then get the HTML using either Javascript or PHP from a different file?
When the page has finished loading, POST the rendered source back to a PHP script using Ajax.
$(function()
{
var data = $('body').html();
$.post('/path/to/php/script', data);
});
(This example assumes you're using jQuery)
It looks like what you need is Firebug. If you are using Google Chrome, you could also use the Google Chrome Developer Tools.
These tools will allow you to view the live DOM of the page as well as track any changes made by your javascript. Tools like these are essential to us as developers.
You can not receive the rendered HTML source by an other resource other than from JavaScript on your page itself. After JS finished all the content changes in the HTML, you could post the HTML source to a PHP on the server and save it.
Pseudo code:
// JavaScript using jQuery
setTimeout("jQuery.post('/catch.php', jQuery(document));", 2000);
// on the server side create a catch.php file
<?php
file_put_contents('./tmp.txt', 'php://input');
You can't, easily.
JavaScript modifies the DOM in memory. This is completely separate entity than the "source" you originally sent to the browser.
The closest thing you can do is build an XML representation of the DOM via JS and send it back to the server via AJAX. Why you would want/need to do this is beyond me.
Open your Bookmarks/Favorites and create a new one with this and then click it after your page loads:
javascript:IHtml=document.documentElement.innerHTML;
LThan=String.fromCharCode(60);
LT=new RegExp(LThan,'g');
IHtml=IHtml.replace(LT,'<');
IHtml=IHtml.replace(/ /g,' ');Out ='';Out+='<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN"';Out+=' "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd">';
Out+='<html xmlns="http:\/\/www.w3.org\/1999\/xhtml" xml:lang="en-US" lang="en-US">';
Out+='<head><title>Inner HTML<\/title><\/head>';
Out+='<body style="color:black;background-color:#ffffee;">';
Out+='Body HTML:<br \/><ul>';
NLine=String.fromCharCode(10);
ILines=IHtml.split(NLine);
for (ix1=0; ix1< ILines.length; ix1++) {
Out+='<li>'+ILines[ix1]+'<\/li>';
}
Out+='<\/ul>';
Out+=' [<a href="javascript:void(0);" onclick="window.close();" title="close">Close<\/a>]';
Out+='<\/body><\/html>\n';
PopUp1=window.open('','IHTML');
PopUp1.document.write(Out);
PopUp1.document.close();
I'm loading some content into a jquery-ui dialog via .ajax. That's all working fine but now I've been given an OpenX ad to embed into the dialog & can't figure out how to do it. I know all the script is stripped when coming in via ajax, & I know how to use $.getScript to load .js files for use in the dialog, but the OpenX ad script I've got uses document.write so I think it's expecting to be embedded inline into the desired position on the page.
I've tried appending the escaped script string into the div on ajax success of the main content as below, but this results in the page being redirected to a page with just the ad on it.
Attempt shown below:
$("#" + idHelpPage).find(".adScript").append("<script type='text/javascript'>var m3_u = (location.protocol=='https:'?'https://d1.openx.org/ajs.php':'http://d1.openx.org/ajs.php');var m3_r = ... etc etc
I'm ok with jquery but not great with javascript, would really appreciate any help! Also if you want to see any other code.
Certainly this question was asked quite some time ago; however, the openX ajs.php file returns a document.write() function. If you use jQuery's $(document).ready() class method, it will overwrite your current page.
document.write() will only correctly execute (without overwriting your current page) if it is called during the page load procedure.
There's two ways to overcome this obstacle, and that would entail using AJAX (if your openX server is on the same URL domain as your website, or if you have server side scripting such as PHP, ASP, etc) or JSONP (if your openX server is on a different domain).
You'll have to setup a server side script with PHP, ASP, etc to have your jQuery call using AJAX/JSONP and have that server script load in the URL and return the contents of the document.write() function that the ajs.php file returns.