Embed (iframe or object) and Modify (jQuery) webpage - javascript

I'm simply trying to load another webpage in my webpage using the object tag or iframe. Then, I would like to remove some element of the loaded page with jQuery.
Here is my code
<div>
<object type="text/html" data="http://ebird.org/ebird/map/eurtre1" width="100%" height="400px" id="eurtre1">
</object>
</div>
<script>
jQuery( window ).load(function() {
jQuery('#map-sidebar').remove();
});
</script>
And, as you guess, it is not working...
I have tried:
jQuery('#eurtre1').contents().find('#map-sidebar')
and
jQuery('#eurtre1')[0].contentDocument.children
The wired thing is that on my browser, I can do it in the console, once I've selected the inside of the object...
Any idea ?

Here's a link to a similar question:
how to access an iframe and affect it with jQuery
Basically you can't due to Javascript same-origin policy but if you have access to the loaded content in the iframe you could use window.postMessage
You could also add a parameter to the iframe's src tag to post a message, something like this:
<iframe src="http://www.example.com?hideElement=true"></iframe>
Again you will have to have access the content of the iframe to check the param and execute your code.

Related

Changing an iframe SRC dynamically

What I have and I need to do it work properly is when I'm in a "start page" and I click a button like this:
PAGE-1
Point A
It should send me to "another page" where I load dinamically an iframe taking each variable (shopID, type, max-levels and point) from the URL and print it like an iframe this way:
PAGE-2
<iframe id="frame" src="http://myappwebsite/resourcesiframe?shopId=3366&type=image&point=A" width=“XXX" height=“XXX"></iframe>
I've used this javascript snippet but anyway, I can't make it work properly at all.
$(".map-button").click(function (e) {
e.preventDefault();
$("#frame").attr("src", $(this).attr('data - iframe - src'));
});
I only need to get the variables from the data-iframe-src and use them in the iframe, but I'm not able... The problem is that I load elements in different pages, so I don't know how this affect to the URL variables.
I've founded a simple solution for my problem here and it works for me.
First of all I put this simple iframe in my PAGE-2:
<iframe id="frame" src="" width="100%" height="auto" frameborder="0" scrolling="yes"></iframe>
Then in PAGE-1 I've used this type of links:
https://myappwebsite/page-2?shopId=1234&type=image&max-levels=1&point=A
So now my PAGE-2 loads properly with these params in the URL. Then I've used this simple snippet in Javascript to fill my iframe in PAGE-2:
<script type="text/javascript">
$( document ).ready(function() {
$("#frame").attr("src", "https://myappwebsite/resourcesiframe" + window.location.search);
});
</script>
And it works! Now I can go to PAGE-2 with all my params, pick them and use them in SRC inside the blank iframe.
Thanks for getting me in the correct path!

Iframe doesn't resolves the value from controller after the first load

I am using angular js frame work and has an iframe tag inside a ng-dialog. I am passing the src as
var SrcUrl=staticurl+dynamicUrl;
$scope.IframeSrcUrl=$sce.trustAsResourceUrl(SrcUrl);
and at the html
<iframe src="{{IframeSrcUrl}}" name="frame2" id="frame2" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto" onload="" allowtransparency="false" height="350px" width="100%" ></iframe>
The iframe will resolves the proper url on its initial load.. but once if i close the ng-dialog and again open it; it will consider the "IframeSrcUrl" as string take it as a param for my base url and will return a 404 error.
i have tried ng-src instead of src.. but it also didn't works..
here staticurl is an externally hosted site and dynamicUrl is a dynamic genarated parameter. whenever i do some action , for instance a button click i need to start the ng - dialog box which redirects to the IframeSrcUrl via iframe.
now the problem is that , on second load the iframe considers IframeSrcUrl as a string and try to redirect to
"http://localhost:1337/%7B%7BIframeSrcUrl%7D%7D"
On load event of the dialox box, try this :
document.getElementById('frame2').src = document.getElementById('frame2').attr('data-src') and put the attribute data-src={{IframeSrcUrl}} on your iframe.

change iframe to script includes the iframe

I have this part of code:
<div class="embed"><iframe id="iframe" src="<?php echo DOMAIN_NAME; ?>demo?q=<?php echo $number;?>"><body></body></iframe></div>
and i want to make an asychronous script that includes this iframe. So in the end i will give in my clients the asynchronous script code instead of iframe. I want to do that for 1 main reason. In case my website is down i don't want to decrease the speed of the websites/portals that my clients have post my iframe.
when somebody clicks on embed div then an iframe given to my clients. i want to give an asychronous script instead of this iframe.
Is it possible?
Any ideas?
You mean something like
var cosnikFrame = document.createElement("iframe");
cosnikFrame.width=450;
cosnikFrame.height=300;
cosnikFrame.setAttribute("scrolling","no");
cosnikFrame.style.border=0;
document.body.appendChild(cosnikFrame);
cosnikFrame.src="http://example.com/demo.php?q=12aA1b35A4a";
or to defer to after load using for example jQuery:
$(function() {
$("body").append('<iframe width='450' height='300' scrolling="no" style="border:0" src="http://example.com/demo.php?q=12aA1b35A4a"></iframe>');
});

call iframe function from parent window

How to call a javascript function in ifram from parent window.
i have a jsp page which contains an iframe.
jsp page is served by "a.yenama.net" server and iframe is served "b.yenama.net" server.
<iframe width="1200" height="640" name="data" id="dataId" >
</iframe>
<br/>
<input type="button" name="data" value="Save data" onclick="callSaveData();" />
tried below code from parent jsp page and recieved permission denied error in IE
window.frames['data'].callData();
also tried
document.getElementById('dataId').contentWindow.callData(); //didn't work
Function in iframe
window.callData = function(){
alert('Iframe function');
}
your help is truly appreciated.
you can do that by declaring your function in a common .js file
Therefore, you can access your function from wherever you want.
Have a nice day
i would suggest you to use jquery.load method instead of iframe to load your second page in a div of first page and then you can call any methods from both the pages
$('#result').load('PageWhichYouAreOpeningInIFrame.html');
or if you still wants to go with IFrame then you can use:
Invoking JavaScript code in an iframe from the parent page
http://api.jquery.com/load/

Accessing element inside iFrame returning null

I have a form that posts to an iFrame. The website inside the iFrame is something I have no control over. However I would like to set the display of a few images inside the iframe to "none".
<form id="testForm" method="post" target="testFrame">
<input type="hidden" name="RequestXML" ID="RequestXML" value="<Request><RedirectURL>Account/TokenRequest</RedirectURL></Request>"
</form>
<iframe id="testFrame" name="testFrame" frameborder="0" style="width:1000px;height:500px"> </iframe>
Here is my script at the top of the page:
<script type="text/javascript">
$(function () {
$("#testForm").attr("action", "http://externalwebsite.aspx");
$('#testForm').submit();
var iframe = document.getElementById('testFrame');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
//alert($("#testFrame").contents().find("body").html());
//alert(innerDoc.innerHTML);
});
</script>
Both my alerts return null in Chrome, IE and firefox. What is the best way to access the elements inside that iframe. (in chrome i dont even see the html of that website when I try to do "inspect element" and view the html)
By the way I am doing all this in a MVC4 project
Assuming this is not a cross-domain issue, try:
var body = $('#testFrame').contents().find('body');
Since this cross domain you have two options.
if you have access to the iframe code, then you can place XDM code in there, maybe easyXDM would help.
Or
you have to go server side and get your php/asp.net etc backend to go get the page and get what data it needs.

Categories