Display an HTML form via Javascript document.write? - javascript

If I am way off on how to employ this code then please forgive me, but is it possible to use something like
var url = 'http://www.maxcashtitleloans.com/lmapp.html'
document.write('<script src="'+url+'"></scr'+'ipt>')
to somehow display an html form inside many websites across different servers?
I have a single HTML form that will be continually updated as the needs of the company change, and would like to get them off of IFRAME calls.
A different questions towards the same goal "How can I display off site content on a website and not use IFRAME"
I know of an affiliate marketing company that uses
<script type='text/javascript'>
var inputOptions = {
UserID: '35696',
Product: 'payday',
ProductTemplate: 'lights',
Server: 'https://altohost.com/',
mobileDevices: true,
parseDefaultValue: true,
visitor: {
referrer: (document.cookie.match("rfrrr[\r\n\t ]*=[\r\n\t ]*(.*?)(;|$)") || [,''])[1],
subaccount: (document.cookie.match("src[\r\n\t ]*=[\r\n\t ]*(.*?)(;|$)") || [,''])[1],
keyword: (document.cookie.match("kwrd[\r\n\t ]*=[\r\n\t ]*(.*?)(;|$)") || [,''])[1],
clickid: (document.cookie.match("clcid[\r\n\t ]*=[\r\n\t ]*(.*?)(;|$)") || [,''])[1]
},
};
document.write('<scr'+'ipt type="text/javascript" src="https://altohost.com/system/applicationforms/init.php?vn=inputOptions"></scr'+'ipt>');
</script>

I'd propose a slightly different approach.
Use JavaScript to create the HTML form and include that script into all other websites using the same source.
Assume form.js is the file you want to include in every website.
Live DEMO
forms.js
var company = {};// Avoid name clashes!!!
company.form = function() {
this.render();
};
company.form.prototype.render = function() {
var url = "blablabla";
this.form = document.createElement("form");
this.form.setAttribute("method", "post");
this.form.setAttribute("name", "company-specialform");
this.form.setAttribute("action", url);
var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("value", "test");
var submit = document.createElement("input");
submit.setAttribute("type", "submit");
submit.setAttribute("value", "submit");
this.form.appendChild(input);
this.form.appendChild(submit);
var that = this;
this.form.onsubmit = function(event) {
that.submit.call(that, event);
};
};
company.form.prototype.submit = function(event) {
event.preventDefault(); // if needed
alert(" Custom submit was called");
};
company.form.prototype.getForm = function() {
return this.form;
};
company.form.append = function(container) {
var form = new company.form();
container.appendChild(form.getForm());
};
var target = document.getElementById("container");
company.form.append(target);
Now simply include forms.js on any other website, but make sure you use the same src for all of those websites, so you can keep the script up to date.
Now on every of those website, they can add the form with company.form.append(someDiv) and when you update the script the update will be available on all websites.

Okay, there is solution for you. Your embed code like this;
<script>
var url = 'http://www.maxcashtitleloans.com/lmapp.js'
document.write('<script src="'+url+'"></scr'+'ipt>')
</script>
And http://www.maxcashtitleloans.com/lmapp.js like this :
function ajaxex()
{
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.write(xmlhttp.responseText);
}
}
xmlhttp.open("GET","lmapp.htm",true);
xmlhttp.send();
}
ajaxex();
Thats work fine. And demo for you : http://commention.com/lmappjsexample/
That solution like javascript proxy, you have to create a javascript file for render your html page.

You can use simple jQuery:
<script>
$('body').load(url);
</script>

well, a <script> tag is for including javascript, not HTML. You want to look into ajax. You want to load the html file via ajax into a div.
Alternatively, leave it as an iframe. Iframes are for including one page into another.
Edit
The example you included from the affiliate is meaningless for you. They are loading javascript that is generated programmatically from a PHP server side script based on input from client side cookies. You are trying to load en external html file, these are two different tasks.
javascript in your HEAD tag
<!-- Include the jquery library - never re-create the wheal -->
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
// Run once the page is loaded
$('#putFormHere').load('http://www.maxcashtitleloans.com/lmapp.html');
});
</script>
Replace your current iframe with this
<div id='putFormHere'></div>
Assumption
I'm assuming that www.maxcashtitleloans.com is the same domain as your current page. If not then they only way to do this is via an iframe. Javascript will not support cross-site scripting.

Script tags do not HTML rendering. You have to add HTML render to your html page. Maybe you can add this code to your html page. This code render your html codes on javascript.
document.write($(body).html());

Related

Trouble loading js

I'm sorry in advance if this is simple or if it just can't be done. Basically, I am trying to load an age verification js on my site, but I am trying to chose between different pages depending on the legal drinking age in different countries.
If I load the script simply, it works fine:
<script type="text/javascript" src="https://av.ageverify.co/jsfr/singlemalt.18.js"></script>
However, if I trying to do any sort of modification to this script, it won't load at all. For example, if I try to set the src to a variable (that I would call in a different script, it fails to load).
<script>
url = "https://av.ageverify.co/jsfr/singlemalt.18.js";
</script>
<script type="text/javascript" src=url></script>
Any ideas would be greatly appreciated!
EDITED:
Additional info:
I tried to use getScript as people have suggested but also had issues with it:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script>
$.getScript("https://av.ageverify.co/jsfr/singlemalt.18.js");
</script>
or this method:
function loadJs() {
var url = "https://av.ageverify.co/jsfr/singlemalt.18.js";
var script = document.createElement("script");
script.src = url;
document.head.appendChild(script);
}
This last one seems to work with other simple scripts, but maybe this particular script is looking for some sort of browser condition? Any suggestions on how to figure that out or what to look for? There should be an age verification page that pops up, asking your age.
HTML tags do not understand variables. You need to use a URL for the src attribute. HTML has no idea what your JavaScript variables are.
If you want to load the .js file this way, you need to use JavaScript. What you can do is create a new <script> tag then append it to the page.
var url = "https://av.ageverify.co/jsfr/singlemalt.18.js";
var script = document.createElement("script");
script.src = url;
document.head.appendChild(script);
If you are using jQuery, this is basically what $.getScript does.
var url = "https://av.ageverify.co/jsfr/singlemalt.18.js";
$.getScript(url);

Set Browser Title for PDF Page

I load a pdf that the user clicks on via a URL call. See the following javascript:
$("ul.card[data-entry-id]").css("cursor","pointer").on("click",
function(event)
{
document.location = "/archives/entry/" + $(this).attr("data-entry-id");
}
);
I want to change the browser title of the pdf that comes up, so that it is not just the url. Adding document.title("New Title") to the function block does not work because it is not synchronized with the server returning the file that's being displayed in the browser. How can I overcome this?
Perhaps I could open a new page (rather than changing the document location) that wraps the URL call in html so that I can set the title - something like this:
<html>
<head>
<title>New Title</title>
</head>
<body>
<iframe src="/archives/entry/98"></iframe>
</body>
</html>
And that way, I could set the title. How can I write this html to a new page from within the javascript function block I have that responds to a click? Thanks in advance.
Instead of changing location you can load data by ajax.
$("ul.card[data-entry-id]").css("cursor","pointer").on("click",
function(event)
{
var title = $(this).text();
var url = "/archives/entry/" + $(this).attr("data-entry-id");
document.body.innerHTML = "<p>Loading...</p>"; // Or a loading image
$.ajax(url).done(function(data){
$(document.body).html(data);
document.title = title;
})
}
);
If you set a title in the PDF document you can make it display as your browser title.
Follow these instructions:
http://www.w3.org/TR/WCAG20-TECHS/PDF18.html
A jQuery approach, relatively easy to modify for plain JavaScript:
$('body').html('<iframe src="/archives/entry/98">');
document.title = "New Title";

Randomly load different JavaScript between each page load using loadExternalHTMLPage

I have a site and I want it to randomly load a different HTML5 Javascript animation each time the page is loaded, JavaScript is by far one of the weakest of my skills and I appreciate any help in advance and if this happens to be duplicate (I've tried searching) then please vote for the question to be closed.
Basically the method I have used is a dirty one and most likely the reason its not working, basically I tried randommath and had no luck and put this down to my JS skills being extremely weak, the alternative method which looked easier doesn't work either and this is basically inserting a HTML on page load, so for example a.html and b.html which both contain different scripts.
This is what my code looks like:
HTML
<html>
<head>
<script src="js/insert.js"></script><!-- This inserts the Random Page -->
</head>
<body onload="loadExternalHTMLPage()">
<div id="injectjs"> </div>
<canvas="id"> </canvas>
<script src="js/animation-lib-pageA.js"></script><!--Library for pageA -->
<script src="js/animation-lib-pageB.js"></script><!--Library for pageB -->
</body>
</html>
Inject.js
function loadExternalHTMLPage() {
var xmlhttp;
var pagesToDisplay = ['a.html', 'b.html'];
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("jsinsert").innerHTML = xmlhttp.responseText;
}
}
var randomnumber = Math.floor(Math.random() * pagesToDisplay.length);
xmlhttp.open("GET", pagesToDisplay[randomnumber], true);
xmlhttp.send();
}
Most JS Guru's should be able to see that I'm randomly inserting a.html and b.html on page load, now this works but the problem is the scripts contained within a.html and b.html are not executing. (using firebug I can clearly see that the scripts are being inserted as intended).
so for example a and b looks like:
a.html
<script> window.onload = function () { }</script>
b.html
<script> window.onload = function () { } </script>
Basically the code within A and B are valid and work fine within this insert and I've filled the above examples as just a placeholder. A and B both contain JavaScript that executes animation contained within the canvas but it doesn't work at present and I suspect its something to do with the fact I'm loading the scripts after the page has been loaded. Thanks in advance.
You can randomly load the html for A or B and then run its animation.
This example uses jQuery which makes the task of loading remote html easier. Here is a link to the jquery .load function which replaces an existing elements html with the downloaded html: http://api.jquery.com/load/ If you want pure javascript, you can use that [messier!] alternative, but the logic remains the same.
These are the steps:
Be sure the web page has loaded,
Randomly pick A or B to load/execute,
Replace the html in #injectjs with htmlForA or htmlForB,
Wait until the html has been fully replaced,
Run the appropriate animationA or animationB.
Here is starter code. (Be sure you include the jQuery library)
<script>
window.onload(){
// randomly load html+animation A or B
if(Math.random()<.50){
$('#injectjs').load(
'yourSite.com/HtmlForA.html', // first load the html for A
function(){ animationA(); } // then run animationA
);
}else{
$('#injectjs').load(
'yourSite.com/HtmlForB.html', // first load the html for B
function(){ animationB(); } // then run animationB
);
}
}
</script>
You can always use eval() to execute the content you downloaded ... :) (not recommended).
Or you can modify the html page on server to include the random script you want before serving the page to the user (you don't state platform) since it's anyways changed at page load.

JavaScript not executing on Ajax loaded content (no jQuery)

I am having an issue where I am loading ajax HTML content into an element on my page using JavaScript, and trying to execute JavaScript within the loaded content, which is not working.
I am not (and cannot) use jQuery on this project.
The JavaScript I am using to load the ajax content look like:
var loadedobjects = "";
var rootDomain = "http://" + window.location.hostname;
function ajaxPage(url, containerId){
var pageRequest = false;
pageRequest = new XMLHttpRequest();
pageRequest.onreadystatechange = function(){
loadpage(pageRequest, containerId);
}
preventCache = (url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime();
pageRequest.open('GET', url+preventCache, true);
pageRequest.send(null);
}
function loadpage(pageRequest, containerId){
if (pageRequest.readyState == 4 && (pageRequest.status==200 || window.location.href.indexOf("http") == -1)){
document.getElementById(containerId).innerHTML = pageRequest.responseText;
}
}
As you can see, I am passing a URL (of an HTML page) to the function ajaxPage()
The ajaxPage() function is being called in a separate .js file, like so:
ajaxPage('test.html', 'ajax-wrapper');
Which is working, test.html is being loaded in the element with id 'ajax-wrapper', but no JavaScript in the test.html page is working.
Here is what the test.html page looks like (just plain HTML):
<div class="t-page-title">
View Thread
</div>
<script>
alert('hello');
</script>
Even a simple alert('hello'); on the loaded HTML is not firing. The page is not being cached, so that is not the issue. I would know what to do if I was using jQuery, but I am a bit stumped with finding a JavaScript only solution. Any suggestions?
When you use innerHTML, the tags get copied to the destination element, but scripts are not executed. You need an additional eval step to execute the scripts.
jQuery has a function for that called globalEval, without jQuery you'll need to write your own.
[Update] Here is a variation with an iframe that might help address your issue: http://jsfiddle.net/JCpgY/
In your case:
ifr.src="javascript:'"+pageRequest.responseText+"'";
The standard behavior with a div: http://jsfiddle.net/JCpgY/1/

onClick Handler Syntax

I am using the following code that I originally found from this question:
Prevent offline iphone webapp from opening link in Safari
bodyOnClickHandler = function(e) {
var target = e.target;
if (target.tagName == 'A') {
e.preventDefault();
var targetUrl = target.getAttribute("href");
window.location = targetUrl;
}
}
The question describes the solution but not how to actually implement it. Also, I am attempting to do the exact same thing as in the original question. Thanks!
You can do something like this.
<body>
Click me
<div id="dynamic-content"></div>
<script id="template" type="text/html">
<h1>Hello</h1>
<p>This is a template</p>
</script>
<script>
document.addEventListener('click', function (e) {
var target = e.target;
if (target.tagName == 'A') {
e.preventDefault();
document.getElementById('dynamic-content').innerHTML = document.getElementById('template').innerHTML;
}
}, false);
</script>
</body>
It catches all click events and prevents the default behavior. It then takes content from a template, which is stored inside a script tag with type "text/html", and injects it into the DOM. All browsers will ignore script tags with anything other than "text/javascript", so it's safe to hide template content this way. I'm not doing anything dynamic with the template here, but if you wanted to do that, you can use something like John Resig's MicroTemplate as he describes here: http://ejohn.org/blog/javascript-micro-templating/. When using something like MicroTemplate, you'll want to merge the template content with dynamic data before injecting it into the DOM.
Another good templating option is jQuery's official template (co-authored by Microsoft): http://api.jquery.com/category/plugins/templates/

Categories

Resources