Insert HTML Content from URL into HTML (form, div, iframe, ...) - javascript

I want to display the result of this URL
http://api.openweathermap.org/data/2.5/weather?q=Berlin,de&mode=html&appid=...1
which looks like
https://i.stack.imgur.com/WWRoD.png
how can I insert the HTML content from the URL directly into an iframe or div?
Thanks!

If you already are able to get that response html, all you need to do is insert it onto the page
document.getElementById('mydiv').innerHTML = "<p>some html</p>"

This could easily be achieved by PHP.
<?php
echo file_get_contents("ENTER URL HERE");
?>
You could do this via JavaScript, but that would require making an AJAX request to get the HTML and then inserting it into the DOM. I don't think that this would be the best method as the page would have already loaded without the code and then asynchronously adding it to the page. Depending on how it is meant to be viewed, I think this would lead to a poorer UX.
Edit
To download the HTML asynchronously, you should use .get(), instead of .load().
$.get("URL", function(data) {
$(".mydiv").html(data);
});

Related

I want to take url from page's view page source

For example this url
https://in.pinterest.com/pin/695524736192250687/
from its page source want to take
<img alt=" " class="hCL kVc L4E MIw" importance="auto" loading="auto" src="https://i.pinimg.com/236x/a8/7f/22/a87f2200109b01fc7a74b6106cb76f7b.jpg"/>
echo this from its page source:
https://i.pinimg.com/236x/a8/7f/22/a87f2200109b01fc7a74b6106cb76f7b.jpg
on
https://youtubethumbnaildownload.online
You can use SimpleHtmlDom to scrape the data from the source code and then look for the class and img tags or whatever else you need to do.
A simple PHP HTML DOM parser written in PHP5+, supports invalid HTML, and provides a very easy way to find, extract and modify the HTML elements of the dom. jquery like syntax allow sophisticated finding methods for locating the elements you care about.
You can store this url into session variable for the current page and then retrieve this session on another page where you want that url.
like :
$_SESSION['url'] = $url; // store value/url in session
$uel= $_SESSION['url']; //retrieve session value on another page
Make sure that you need to strat your session first.
session_start();

Echo the src value of an iframe on a page

If I have a file called 'index.php' and this file contains a lot of HTML lines...
Also (index.php) have this iframe:
<iframe src="http://test.com" />
How I can use PHP to get the src which is "http:/test.com" ... so it will be like that:
$getiframesrc=THE_CODE_WHICH_I_WANT_SOMEONE_TO_TELL_ME_ABOUT_IT;
And I can easily echo the src of the iFrame by echo $getiframesrc;
For example: If I want to make a browser using PHP, I want the URL Address Box's text to be the value of the iframe src (THIS IS ONLY AN EXAMPLE!!!)
So, please guys tell me what should be :
"THE_CODE_WHICH_I_WANT_SOMEONE_TO_TELL_ME_ABOUT_IT" .
EDIT: $getiframesrc will be in index.php too!
And thanks :-)
you can use ajax and jquery to get the src value then send it to the php file
Jquery
$(document).ready(function(){
var vidsrc = $("#iframeid").attr("src");
$.post( "index.php", { videosource: vidsrc });
});
index.php
if (isset($_POST["videosource"]))
{
$videosource = $_POST["videosource"];
// code to be excuted
}
Here's a working example -- and make sure you close your <iframe> tag.
$('button').click(function(){
var src = $('iframe').attr('src');
alert( src );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button>Read iframe src</button>
<iframe src="http://test.com"></iframe>
To re-use the src variable elsewhere on the page, just declare it outside the $('button').click(function() function -- or even outside the $(document).ready() fn.
EDIT:
To get the variable data to PHP... By the time the javascript runs, the DOM has been rendered. PHP has finished execution and will not run again on that page.
So, what to do? How to get the variable into PHP? You have two choices:
(1) Use a form - When submitting a form, the data is sent to the PHP file specified in the action= attribute on the <form> opening tag:
<form action="your_secondary_php_file.php" method="post">
Downside to a form is that user is navigated away from the page, or (at the very least) the page is refreshed.
(2) Use AJAX. AJAX (very simple, not to worry) will send your data to a back-end PHP file, the PHP file can do something with that data, and then it can (optionally) send new data/HTML/text/whatever back to the AJAX code block.
Advantage of using AJAX - will not refresh or move away from the current page. All user-entered data remains as is, and you can pro-grammatically receive data back from the PHP side and dynamically update the page with the new data. Magic by another name.
This answer contains some simple examples of AJAX.
Firstly, thank you very much #gibberish ( gibberish ) for your answer, it's the best answer for me and I'm using it now :-) .
I figured out how to do that with PHP (thanks for #gibberish to help, because his example helped me.) - But sorry :/ I can't say how I did that because it's very hard coded (everything is manual in that) ... so I will simplify it and post the answer :-)
Next to the #gibberish answer, we can use PHP GET variable and set the iFrame src with it.
Example:
PHP Part in index.php :
<?php
$iframesrc=$_GET['iframesrc'];
?>
HTML Part in index.php :
<iframe src=<?php echo $iframesrc; ?>></iframe>
And then we can access http://Mysite.tld/index.php?iframesrc=http://test.com ;)
So now, I can code well - like that:
if($iframesrc !=="http://test.com")
{
//code
}

Running the javascript code present on another html page through jquery

It might be a noob questions but I have just started using jquery.
My basic requirement to extract the link which is there in the javascript code present in another html (code is embedded in the html page and not in a seperate file).
The link is also present as a href attribute of <a> tag inside a tag, just to add if it is easier to extract it from there (I am using chrome so I think it considers there are no child nodes of <noscript> tag)
After this I tried doing an ajax request to the html page (using $.ajax) thinking it will run the scripts on the page but got the html code of the page in return :S . I have also heard of something called evalscripts:true but not sure if that will work here or how to use it?
I have also tried to search for the link in html code returned by my html page by using the "contains" operation of jquery.
I am doing all this to create a greasemonkey script. Please suggest
Example Code:
This is a function present inside the html of that page:
function fun() {
obj = new pollingObj('argument', "a link I want to extract comes here");
}
I want to extract the link: "a link I want to extract comes here" and then open it.on my page where I am running my jquery script
This link is also present like this on the html page:
<noscript>
blabla
</noscript>
Also is it possible to run the javascripts present on that page if the link extraction is not possible?
If you're able to get the html code of the page successfully via .ajax, and the data you want is in the HTML code, it's not worth the effort to bother with trying to run the scripts. Just access the URL through the DOM:
// ajax success function
success: function(html) {
var anchorCode = $(html)
// this assumes that noscript is a top-level element
// otherwise, use .find('noscript')
.filter('noscript')
.text(); // get the code for the anchor tag, as a string
var myLink = $(anchorCode).attr('href');
// do something with myLink
}
Edit: It turns out that jQuery is a little funny in the way it deals with noscript tags - inner tags don't appear to be considered part of the DOM, so you need to grab the text content of the tag and then use jQuery to DOM-ify it. See updated code above.

javascript Refresh Div

I am using this code to refresh the data inside of the div:
<script>
$(function() {
$("#refresh").click(function() {
$("#new").load("/new.php")
})
})
</script>
Except it loads the who page inside of the div, instead of just the information that is inside of the div.
How do I make it refresh only the data that is inside of the div? Is there a way of doing it other than putting the information for that div in a seperate page?
If you mean that new.php is a script that returns the entire page, the answer is no.
You have to send just the html fragment you need for refreshing the div.
You can always get the result from new.php, take the good part and discard the rest but it is inefficent.
You can load page fragments with 'load'. Say the information you need is inside a div called "#info" on new.php, change the load line to this:
$("#new").load("/new.php #info")
If you were refreshing data from the server you have to reload the whole page/frame (you could request the client to cache images, CSS, etc.) or use Ajax.

Post to entire document like a form using jquery?

i wan't to pass a variable without using get to php, so, i'm using post with jquery, but i can't write the result into the document (refresh all the page)
here is the code:
$.post("/"+$(this).attr("href"),{returnto:$(this).attr("rel")},function(a){$(document).html(a);});return false;});
The document is not the place to write your result as the document is the meta envelope around the html page you see. Rather use the body:
$("BODY").html("MY ANSWER IS: "+a);

Categories

Resources