iFrame URL parameter to an in Wordpress? - javascript

I have a page which has an iframe embed of an external page. I want to find zip code
Here is my iframe:
<iframe src="http://mortgagerates.icanbuy.com/?zip=" width="1020" height="1200">
http://mortgagerates.icanbuy.com/?zip=10458 (Main Site )
But i want i frame and my browser url same below:
http://www.mysite.com/?zip=10458 (I want something like that)
Is this possible in wordpress? how?

Please check it.. I hope work it...
<iframe src="http://mortgagerates.icanbuy.com/?zip" width="1020" height="1200" class="iframe-wrapper">
And add this jQuery. Thats It!
<script type="text/javascript">
$(function() {
var search = window.location.search;
search = search.replace("?","&");
$(".iframe-wrapper").attr("src", $(".iframe-wrapper").attr("src")+search);
});
</script>

This is ajax page. you want to use ajax.
http://mortgagerates.icanbuy.com/ajax/rates-search?callback=jQuery17209362620610679678_1385958692723&source=1&results_count=0&period=PERIOD_FIXED_30YEARS&state=33&property_type=34&occupancy=49&fico=740&points=1.5&currently_working=Yes&property_interested=Yes&show_fha=0&cashout=0&city=10458&valoans=0&militaryaff=1&hadvabefore=0&rate_lock=99&loan=200000&transaction=54&ltv=80&cltv=80&DO_UPDATE_WRITE=0&id=d4ea9f8db0477778&external=0&_=1385958692873
you need to pass your zipcode into city=10458. its return json encoded format. you simply parse this into your design.

Related

How to add a PHP page into blogspot.com new page

I have a real .php page like this http://hiteachers.com/soccer_parse.php?id=5. I want to add it into a blogger.com new page (**not a new blog post, or new HTML widget **, and I've got this successfully.
https://tranbongda.blogspot.com/p/function-myfunction-window.html
I used the code like this:
<script>
var Window;
// Function that open the new Window
function windowOpen() {
Window = window.open("http://hiteachers.com/soccer_parse.php?id=5",
"_blank", "width=400, height=450");
}
// function that Closes the open Window
function windowClose() {
Window.close();
}
</script>
<button onclick="windowOpen()">Open page</button>
<button onclick="windowClose()">Close page</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function()
$("button").click(function(){
$("#div1").load("http://hiteachers.com/soccer_parse.php?id=5");
});
});
</script>
My expectation is that I'd like the blogger page to load the original content of the .php page immediately when the visitor visits the blogger.com page (https://tranbongda.blogspot.com/p/function-myfunction-window.html) without clicking on any button.
I have thought of creating iframe by using this:
<iframe name="Framename" src="http://hiteachers.com/soccer_parse.php?id=5" width="550" height="550" frameborder="0" scrolling="yes" style="width: 100%;"> </iframe>
But the blogger.com page does not accept it, and returns the error message like this:
This page contains HTTP resources which may cause mixed content affecting security and user experience if blog is viewed over HTTPS.
Then I moved to try this <object width="500" height="300" type="text/html" data="http://hiteachers.com/soccer_parse.php?id=5"></object> as per some bloggers' suggestions, but I still failed.
Some other bloggers suggested to use AJAX, which is very new to me.
So, is there any way to parse the provided .php page content and add it to the blogspot.com/blogger.com new page without showing the url of the .php page or window pop-ups?
Can you help me please?
Thanks
As the bloggers likely have suggested, make the PHP server a REST endpoint and access the data on the blog site with Asynchronous JavaScript and XML. Although today people have tended to scratch the XML part and go with JSON or something.
AJAX is accomplished by using the XMLHttpRequest object.
Mozilla's spec provides links and stuff which will show you how to use it
and w3schools is a good resource.
Then it's all comes down to editing the page directly
element.removeChild(element.lastChild);
element.appendAdjacentHTML('beforeend',xhr.responseText);

GET in HTML and Not PHP

I want to process a GET extension in a HTML page and not a PHP page.
I have looked through the internet and not found anything.
URL = examplesite.com?id=1234
I assume this would go to the index page on the domain. As the index page is a HTML page, is there a way to get the details of the extension transferred to another link I have in the html script that emails me when someone looks at the site.
<script src="trigger.php">
</script>
This way I can customise the extension to know where the person found me. id=1234 is from twitter, id=2345 from FB etc.
Then i could place the extension onto the script to send me the email.
<script src="trigger.php?id=1234">
</script>
Is there a way to get the HTML page to process extension and pass it on in a variable of some sort.
Thanks in advance
Robert
You can do it in Javascript in the HTML. window.location.search contains the query string from the URL.
You can then use an AJAX request to send the query string to your server script.
<script>
$(document).ready(function() {
var script = 'trigger.php' + window.location.search;
$.get(script);
});
</script>
This is not possible with plain HTML. By definition, HTML is not dynamic. It can't process anything you want. However, there are three options.
Firstly, you can use JavaScript and AJAX calls to make another HTTP request to examplesite.com/processID.php (or another PHP page) which will process the request.
Another way to use JavaScript would be to use a client side API such as MailChimp to send the email directly from the users computer.
Or you could just redirect your root page for your domain examplesite.com to lead to index.php. I'm sure that's very easy to configure in mainstream servers such as Apache or Nginx. Otherwise please ask another question on Server Fault about how to set this up using your server.
If you are using a PHP hosting provider, they should also be able to help redirect the root page. If you don't have any access to PHP on your hosting provider, you're out of luck. You must only use the second option.
Do it with ajax
<form id="form1">
<input type="text" />
<button type="submit" id="sendforms">send</button>
</form>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#sendforms").click(function() {
var combinedFormData = $("#form1").serialize();
$.get(
"trigger.php",
combinedFormData
).done(function(data) {
//alert("Successfully submitted!");
$("#result").html(data);
}).fail(function () {
//alert("Error submitting forms!");
})
});
});
</script>

loading html code with html

I want javascript to load a html code so it can be embedded in a page, all I get is the raw html code without being compiled.
<script>
document.write('http://www.example.com/index.php?title=Media:Object4&action=raw&ctype=html')
</script>
It contains the html coding inside and I want it to embed in pages so I can share with other websites.
Are you trying to get the HTML from that URL and embed it in the page? JavaScript can't do that for security reasons, but if you're using PHP server-side you can use:
echo file_get_contents("http://..........");
Or you can use an iframe:
<iframe src="http://........" />
The easiest way to make this work, sort of, is by using <iframe>:
<iframe src="http://www.example.com/index.php?title=Media:Object4&action=raw&ctype=html"></iframe>
If you want to load it inside a particular container, you have to perform a web request using JavaScript; jQuery example:
<div id="container"></div>
<script>
$('#container').load('http://www.example.com/index.php?title=Media:Object4&action=raw&ctype=html');
</script>
If the remote URL is not in the same domain, you need to use a proxy:
<script>
$('#container').load('/path/to/myproxy.php', {
url: 'http://www.example.com/index.php?title=Media:Object4&action=raw&ctype=html'
});
</script>
Then your PHP code could look like:
<?php
if (parse_url($_POST['url'], PHP_URL_HOST) === 'www.example.com') {
echo file_get_contents($_POST['url']);
}
document.write - adds text to the document - it does not fetch documents from the web.
However, you can use the object tag.
It should look something like that:
<object type="text/html" data="http://www.example.com/index.php?title=Media:Object4&action=raw&ctype=html" style="width:100%; height:100%"></object>
Additionally, if the page that you are fetching is on the same domain, you can use AJAX to fetch it.

redirect pages from weblog to domain with javascript

i want to redirect pages from my weblog to a domain which i have on it.
for example this url:
the-vampire-diaries.mihanblog.com/post/300
should redirect to this:
tvdfans.ir/post/300
the thing is i only have access to the style codes not the files.
i want a JavaScript code that can do this.
You can't write javascript code in stylesheets.
If you have access to an html template, you can just use
<script>
document.location.hostname = 'example.org';
</script>
Yes you can achieve this using javascript
**Example:**
<script langauge="text/javascript">
window.location.replace(someUrl");
</script>

How to start automatic download of a file in Internet Explorer?

How do I initialize an automatic download of a file in Internet Explorer?
For example, in the download page, I want the download link to appear and a message: "If you download doesn't start automatically .... etc". The download should begin shortly after the page loads.
In Firefox this is easy, you just need to include a meta tag in the header, <meta http-equiv="Refresh" content="n;url"> where n is the number of seconds and url is the download URL. This does not work in Internet Explorer. How do I make this work in Internet Explorer browsers?
SourceForge uses an <iframe> element with the src="" attribute pointing to the file to download.
<iframe width="1" height="1" frameborder="0" src="[File location]"></iframe>
(Side effect: no redirect, no JavaScript, original URL remains unchanged.)
I hate when sites complicate download so much and use hacks instead of a good old link.
Dead simple version:
Start automatic download!
It works! In every browser!
If you want to download a file that is usually displayed inline (such as an image) then HTML5 has a download attribute that forces download of the file. It also allows you to override filename (although there is a better way to do it):
Download
Version with a "thanks" page:
If you want to display "thanks" after download, then use:
<a href="file.zip"
onclick="if (event.button==0)
setTimeout(function(){document.body.innerHTML='thanks!'},500)">
Start automatic download!
</a>
Function in that setTimeout might be more advanced and e.g. download full page via AJAX (but don't navigate away from the page — don't touch window.location or activate other links).
The point is that link to download is real, can be copied, dragged, intercepted by download accelerators, gets :visited color, doesn't re-download if page is left open after browser restart, etc.
That's what I use for ImageOptim
I recently solved it by placing the following script on the page.
setTimeout(function () { window.location = 'my download url'; }, 5000)
I agree that a meta-refresh would be nicer but if it doesn't work what do you do...
I had a similar issue and none of the above solutions worked for me. Here's my try (requires jquery):
$(function() {
$('a[data-auto-download]').each(function(){
var $this = $(this);
setTimeout(function() {
window.location = $this.attr('href');
}, 2000);
});
});
Usage: Just add an attribute called data-auto-download to the link pointing to the download in question:
<p>The download should start shortly. If it doesn't, click
<a data-auto-download href="/your/file/url">here</a>.</p>
It should work in all cases.
A simple bit of jQuery solved this problem for me.
$(function() {
$(window).bind('load', function() {
$("div.downloadProject").delay(1500).append('<iframe width="0" height="0" frameborder="0" src="[YOUR FILE SRC]"></iframe>');
});
});
In my HTML, I simply have
<div class="downloadProject"></div>
All this does is wait a second and a half, then append the div with the iframe referring to the file that you want to download. When the iframe is updated onto the page, your browser downloads the file. Simple as that. :D
I used this, seems working and is just simple JS, no framework:
Your file should start downloading in a few seconds.
If downloading doesn't start automatically
<a id="downloadLink" href="[link to your file]">click here to get your file</a>.
<script>
var downloadTimeout = setTimeout(function () {
window.location = document.getElementById('downloadLink').href;
}, 2000);
</script>
NOTE: this starts the timeout in the moment the page is loaded.
Works on Chrome, firefox and IE8 and above:
var link = document.createElement('a');
document.body.appendChild(link);
link.href = url;
link.click();
This is what I'm using in some sites (requires jQuery).:
$(document).ready(function() {
var downloadUrl = "your_file_url";
setTimeout("window.location.assign('" + downloadUrl + "');", 1000);
});
The file is downloaded automatically after 1 second.
I checked and found, it will work on button click via writing onclick event to Anchor tag or Input button
onclick='javascript:setTimeout(window.location=[File location], 1000);'
Back to the roots, i use this:
<meta http-equiv="refresh" content="0; url=YOURFILEURL"/>
Maybe not WC3 conform but works perfect on all browsers, no HTML5/JQUERY/Javascript.
Greetings Tom :)
One more :
var a = document.createElement('a');
a.setAttribute('href', dataUri);
a.setAttribute('download', filename);
var aj = $(a);
aj.appendTo('body');
aj[0].click();
aj.remove();
I hope this will works all the browsers. You can also set the auto download timing.
<html>
<head>
<title>Start Auto Download file</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function() {
$('a[data-auto-download]').each(function(){
var $this = $(this);
setTimeout(function() {
window.location = $this.attr('href');
}, 2000);
});
});
</script>
</head>
<body>
<div class="wrapper">
<p>The download should start shortly. If it doesn't, click
<a data-auto-download href="auto-download.zip">here</a>.</p>
</div>
</body>
</html>
Be sure to serve up the file without a no-cache header! IE has issues with this, if user tries to "open" the download without saving first.
This seemed to work for me - across all browsers.
<script type="text/javascript">
window.onload = function(){
document.location = 'somefile.zip';
}
</script>
For those trying to trigger the download using a dynamic link it's tricky to get it working consistently across browsers.
I had trouble in IE10+ downloading a PDF and used #dandavis' download function (https://github.com/rndme/download).
IE10+ needs msSaveBlob.
I think this will work for you. But visitors are easy if they got something in seconds without spending more time and hence they will also again visit your site.
<a href="file.zip"
onclick="if (event.button==0)
setTimeout(function(){document.body.innerHTML='thanks!'},500)">
Start automatic download!
</a>
Nice jquery solution:
jQuery('a.auto-start').get(0).click();
You can even set different file name for download inside <a> tag:
Your download should start shortly. If not - you can use
direct link.
<meta http-equiv="Refresh" content="n;url">
That's It. Easy, Right?
<meta http-equiv="Refresh" content="n;url">
This is an old question but in case anyone wants to use automatic download of files with Flask, Python. You can do this:
from flask import Flask, make_response, send_from_directory
file_path = "Path containing the file" #e.g Uploads/images
#app.route("/download/<file_name>")
def download_file(file_name):
resp = make_response(send_from_directory(file_path, file_name)
resp.headers['Content-Disposition'] = f"attachment; filename={file_name}"
return resp
Inside a template or html page, index for example
<div>
<a class="btn btn-outline-warning" href={{url_for( 'download_file', name='image.png' )}} ">Download Image</a>
</div>
Clicking on the link will download the file without opening another page.
For more info on:
Content-Disposition
Setting request headers in Flask

Categories

Resources