i am dynamically creating an iframe then calling aspx pages into it, what i need to do is access the elements of the iframe page and change its ( only specific element like text box or label etc.) value without reloading the whole page.
the first task is to access the elements of pages being called into my iframe, i am trying to acess them with javascript but no progress so far.
i have tried various solution like this :
How to get the body's content of an iframe in Javascript?
Actually, the answer you've attached should work. But note that this is only true in case that your parent page and the iframe URL are loaded from the same host (domain name). if not, you will get an error message from your browser stating that this operation is blocked.
If you are trying to show another site through and iframe and then manipulate it then you have to give up this dream because it can't happen that simply.
I can think of one solution for you, not sure about the legality of it, and it is kind of a pain in the ass.
You can open up a server side script on your own domain that receive a URL, fetches it's content and then echo it. This way you get the original desired page contents but you have it on your own host so you can manipulate it as mention in the attached answer.
Note that it's not easy at all to control from there, because once a user clicks a link in the page his out of your control again, so you may want to change all the page links to the address of your server side script and attach the original link to let it fetch it for you. Probably a lot more issues that i haven't thought about.
PHP Example of such a function:
function fetchURL() {
$urlToFetch = urldecode($_GET['url']);
$contents = file_get_contents($urlToFetch);
// maybe here manipulate links and other stuff throw str_replace or,
// if you want more control over it, you may want to load it in to some DOM parser class,
// manipulate it and extract the result back to a string variable.
echo $contents;
}
Note that in that case you should load the script through the iframe with the desired URL as a query string like that:
$yourDesiredURL = 'http://www.example.com';
echo '<iframe src="http://www.yourdomain.com/your/script/path.php?url=' . urlencode($yourDesiredURL) . '"></iframe>';
*************** EDIT *****************
Actually now i see that you tagged .NET, so my example code is probably not the best for you, but since it's very short and simple it wouldn't be any problem converting it.
Again, i want to say that iv'e never tried it and it's probably over your (and my) head, maybe you better give up on the idea.
Related
After going through numerous threads on numerous forums none of them come close to a solution to what I want to accomplish.
Here is want I want to accomplish:
I have a page on an iframe and I want to click a on a div tag inside that Iframe.How do I go about it .i have seen scripts that have mouse event emulator but I do not know how to use them.
Site 1 = http://site1.com/page.html
Site 2 = http://site2.com/abc.html
code for site 2:
Code:
<div>
<div>
<div attribute="text" onClick="somefnc();">
james bond
</div>
</div>
</div>
code for site 1:
Code:
<iframe src="http://site2.com/abc.html></iframe>
What I would like to do is to have a script that automatically click on james bond (the text within the div) bearing in mind I have no control over http://site2.com/abc.html
Preferably list the methods one could accomplish this and where can i learn such type "DOM" (javascript mainly dealing with mouse events) for free.
Any references are highly appreciated.A baby step walk through the code is highly appreciated.
I am noob in this area.
What I a have tried so far:
try 1: javascript
.click();
error of try 1:cross domain issues
try 2: mouse emulation
error of try 2: noobieness code to complex for me
please help.
guessing solutions
mouse emulation like scripts
some neat jquery code
AJAX ,PHP maybe
Unfortunately since you are dealing with two sites on different domains, I don't think it's possible.
Mouse Emulator
Mouse emulator scripts probably dispatch a click event on the page, but unfortunately dispatchEvent won't work for iframes on different domains. Can you post a link or code what you tried with mouse emulation?
If you tried:
document.elementFromPoint(x, y).click();
Based on this Stack Overflow post, the click won't work on a cross-domain iframe:
How to simulate a click by using x,y coordinates in JavaScript?
Quoted: "For instance, it can't be used to trick a cross-domain iframe document into thinking it was clicked."
If you tried:
el.dispatchEvent("click");
Then you need to get the element el somehow from within the iframe contents. Since the iframe is in another domain, you will be blocked from trying to get the iframe contents (using either JQuery or DOM).
var doc = iframe.contentDocument || iframe.contentWindow.document; // security error due to cross-domain
doc.getElement ...
(By the way, it would be easier to use jQuery to get the element since site2's code doesn't have an id on the element, and DOM doesn't provide an easy way to get elements besides by id or class)
JQuery
JQuery provides a function to get the contents of an iframe. Assuming that would work, then you could find the element in the iframe contents and trigger a click on the element. Unfortunately this will only work if the iframe is on the same domain.
var el = $("iframe").contents().find("div[attribute='text']"); // security error due to cross-domain
el.trigger("click");
AJAX, PHP
I can't think of a way to click something through AJAX or PHP. Using AJAX, you could potentially make a GET request to site2 to retrieve the contents of abc.html and insert that on your page, but again, you would have cross-domain issues performing a GET request to another domain from the browser. Instead, you could make a server-side request to get the abc.html (using PHP or other server side code), then you wouldn't have the cross-domain issue. You'd still need to request any css and whatever javascript file where the somefnc() function lives and whatever else it depends on, then somehow inject all that on your page and you still wouldn't actually be interacting with site2, just copies of its files. This would be hacky and tricky to get working, and it really depends on what site2's somefunc() does.
Other options:
Depending on what you need to do and what site2's somefnc() does, you could try to duplicate the same functionality instead of doing it through clicking on an iframe.
If you can work with site2, you could try postMessage to send a message to site2:
http://javascript.info/tutorial/cross-window-messaging-with-postmessage
I try to create an iframe and replace images and links source with my own sources to remove disturbing contents like pornography, violence etc. Removing is not allowed by iframe. I use sandbox for prevent scripts and flash. Is there a way for this? Or what is the best practice to do that?
You can fetch website content by ajax, then replace all occurrences that you looking for and display data. I am quite not sure whether it will be possible to insert dom directly into iframe or object. I will check that out.
If that fails, you can create intermediate service, for instance in PHP, to grab content by curl and then display script results in iframe on your own server.
I am building a Wordpress plugin to display a list of jobs to a user pulled from a recruiting platform API. On click of a job, a cURL request is sent to the API that pulls the job details as a full HTML page (the online job advertisement). I have everything working fine in terms of pulling the HTML, but I cannot figure out how to display it to the user.
How can I either:
Open a new tab to display the HTML pulled from the AJAX request
or
Open the full HTML within a div on the same page (i.e. a modal)
I would prefer to open the HTML in a new page, but don't know how to use jQuery to do this... Opening within the page in a modal is also fine, but as far as I understand iFrames (which I would rather not use anyway), you have to pass a url (and I simply have the full markup). Is there a way to display this within a page, perhaps using canvas? It carries its own links to CSS and Javascript that need to apply only within that sub-page.
EDIT:
As a clarification, I know that I can simply place the HTML within the page. My issue is that it is a full page. This means it has a <head> <body>, and its own CSS links. Just putting it in the page messes with the rest of the CSS and produces invalid HTML.
This is what I already have:
$.post(ajaxurl, data, function(response) {
$('.sg-jobad-full').html(response);
});
It places the response within the page perfectly well... but it messes up the page by introducing a <body> within a <body> and competing CSS.
If you put the response in a <div>, it will mess the markup because css/js/meta definitions may not be put into the <body>.
If there is a way to retrieve the data without the markup already beeing in, you could parse the data and let it print via a javascript, which is the method I'd prefere.
According to your comment, you should really go with iframes, all other methods will alter your markup to have <html> tags inside <html>, which is very bad practice.
Iframes can be styled just like a <div> element, and it is realy not dirty to use iframes for the purpose you mentioned (it does not load from a foreign host, it is not hidden, it does not track).
<iframe class="job-offers-plugin" src=".../wp-content/plugins/yourplugin/getJobs.php">
</iframe>
Put some style into it like width;height;padding;margin;overflow; place it where you like..
This helps you with the databse:
Using WPDB in standalone script?
Add permalinks to your plugin script:
http://teachingyou.net/wordpress/wordpress-how-to-create-custom-permalinks-to-use-in-your-plugins-the-easy-way/
If you get the full HTML in an jQuery.ajax(...) call, you can always just show it in a certain div on your page.
$.ajax({
success: function (resp){
// resp should be your html code
$("#div").html(resp);
}
});
You can use the $(selector).html(htmlCode) everywhere you want. You can insert it into modals, divs, new pages...
If you have to inject a whole HTML page you can:
strip the tags you don't need
or
use an iframe and write the content to that iframe: How to set HTML content into an iframe
iframes aren't my favourite thing... but it's a possibility
I've been searching for a while now, but I can't figure out how to load an entire page via AJAX and still execute all javascript and css.
Mostly I just end up with the plain text without any CSS.
Is there a way to do this? I tried jQuery.get, jQuery.load and jQuery.ajax, but none really work like that.
I have a different solution. You may try it with an iframe. Use jQuery to append an iframe script including all relevant codes into some part of your page (like some div). This may do it for you including CSS, like;
$('<iframe src="your_page.html"/>').appendTo('#your_div');
Or you may try something like;
$('<iframe src="your_page.html"/>').load(function(){
alert('the iframe is done loading');
}).appendTo('#your_div');
I have solved similar problem as following.
Download the webpage over ajax
Iterate it over and find any <script> and </script> tags
Get content from within these tags as text
Create new <script> element and insert there the code
Append the tag to your webpage
Another thing is you will need to somehow call the script..
I have done it this way:
I set standardized function names like initAddedScript callback which I am calling after appending the script to the page. Same as I have deinitScript called when I do not need the code (and its variables,..) anymore.
I must say this is awful solution, which likely means you have bad application architecture so as I have had:)
With css is it the same, but you do not need any handlers. Just append the style tag to your documents head.
If the page you load doesn't have any style data, then the external stylesheets must have relative paths that are not correct relative to the invoking document. Remember, this isn't an iFrame - you aren't framing an external document in your document, you're combining one document into another.
Another problem is that loading your complete page will also load the doctype, html, head, and body tags - which modern browsers will cope with most of the time, but the results are undefined because it's not valid HTML to jam one document into another wholesale. And this brings me to the third reason why it won't work: CSS links outside of the head section aren't valid, and the misplaced head section caused by your haphazard document-in-document collage.
What I'd do for compliance (and correct rendering) is this, which would be implemented in the Success callback:
Copy all link elements to a new jQuery element.
Copy the contents of all script in the head section
Copy the .html() contents from the loaded document's body tag
Append the link elements (copied out in step 1) to your host document's head
Create a new script tag with your copied script contents and stick it in the head too
Done!
Complicated? Kind of, I guess, but if you really want to load an entire page using AJAX it's your only option. It's also going to cause problems with the page's JavaScript no matter what you do, particularly code that's supposed to run during the initial load. There's nothing you can do about this. If it's a problem, you need to either rewrite the source page to be more load-friendly or you could figure out how to make an iFrame suit your needs.
It's also worth considering whether it'd work to just load your external CSS in the host document in the first place.
I suppose you are looking for something like this:
your page div --> load --> www.some-site.com
After a quik search the closest solution seems to be the one by "And": Load website into DIV
You have to run a web server and create a proxy.php page with this content:
Then your JQuery load() function should be like this:
$("#your_div_id").load("proxy.php?url=http://some-site.com");
NB. I have tested this solution and it should not load all the CSS from the target page, probably you'll have to recreate them. For example the image files stored on the remote server will not loaded, I suppose due to authentication policy.
You will be also able to view only the target page without the possibility to browse the target site.
Anyway I hope this could be a step forward to your solution.
Get your entire webpage as text using ajax
document.open();
document.write(this.responseText);
document.close();
OR
document.documentElement.outerHTML = this.responseText;
But you need to change the path of css and js pages in original webpage if the resulting webpage is in another directory.
I have a script which loads content into a iframe using:
document.GetElementById('iframeid').src = 'site.html';
Now, the problem is that I want only a portion of the page loaded. If I could use jQuery I would specify which part by:
$('#iframeid').load(src = 'site.html .classforportion');
However if seems like jQuery .load doesn't work for iframes.
Is it possible to 'fool' the browser into grabbing the contents of a variable or a function for the first case? Or is it possible to create temporary 'html'-files only for so long that the script would load the right contents into it and pass it to an iframe (hm... seems unlikely...).
A work around solution for this specific case would be removing the first line of the loaded page. Is that possible with javascript or jQuery? Is it possible for this situation involving the iframe?
Thanks, going crazy over this thing! So, any help appreciated!
Ive never heard of a way of doing this with javascript since you cannot access files outside your own domain with javascript. You can do like this with PHP
<?php
function get_content_part($part=null, $website = null)
{
$website = file_get_contents($website);
$data = str_replace("\n", '', $website);
echo preg_match("/\<div class\=\"'.$part.'\"\>(.*)<\/div\>/",$data,$match);
return $match;
}
?>
Maybe integrate this with a javascript Ajax call and you can do it by javascript calls.
Best regards
Jonas
Now, the problem is that I want only a portion of the page loaded
Load page into the invisible container (iframe, div, etc..) or in a javascript string variable and do whatever you want to do with it. For example, load partial content into invisible div and than copy it into iframe or load the hole page into invisible iframe and then copy the part you need into another, visible one.