I have a problem with getting the HTML content of an iframe.
JQuery:
$( document ).ready(function() {
var template_html = $("#get_template_html").contents().find('body').html();
alert(template_html);
});
HTML
<iframe id="get_template_html" src="templates/1.html"></iframe>
This works good in Mozilla Firefox, but in Google Chrome it shows blank alert window.
What could be the reason?
Thanks a lot!
Add onload to your iframe, and call the JS function.
Your JS:
function afterLoading(){
var template_html = $("#get_template_html").contents().find('body').html();
alert(template_html);
}
Your HTML
<iframe id="get_template_html" src="templates/1.html" onload="afterLoading();"></iframe>
Related
I need to set a URL to iframe dynamically, but when I do so, the iframe is empty.
Here is the iframe's definition:
<html:iframe id="myFrame" width="700px" height="500px"></html:iframe>
And here how I tried to set the URL:
var sRedirectUrl = "http://google.com"; //dynamically defined url
var sIframeId = this.getView().byId(this.createId("myFrame")).getId();
$("#"+sIframeId).attr("src",sRedirectUrl);
Here is jsbin example.
I also tried to do the following:
Definition:
<IconTabFilter id="iframe_container">
</IconTabFilter>
Url set:
var sRedirectUrl = "http://google.com"; //dynamically defined url
this.getView().byId(this.createId("iframe_container")).addContent(
new sap.ui.core.HTML({
content: "<iframe scr=\""+sRedirectUrl+"\" width='700px' height='700px'></iframe>"
})
);
And it doesn't work also.
What am I missing here?
Thank you.
UPDATE
Hard coding a generated link into iframe is working fine:
<html:iframe id="myiframe" src="https://generated_link_to_some_site.com?uniqueId"></html:iframe>
You are doing right, but Google does not allow iFrame, try with test.com in your jsbin instead and it will work : http://jsbin.com/vuqujoxupe/1/edit?html,output
The reason why iframe was empty is very simple - I tried to call the element before it was rendered.
It took me 3 days to realize that. Don't be like me.
is it possible change or append hyperlink in a iframe?
Here is my code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
function changelinks(iframe){
var as = iframe.contentDocument.getElementsByTagName('a');
for(i=0;i<as.length;i++){
as[i].setAttribute('href',"http://www.yahoo.com");
}
}
</script>
</head>
<body>
<iframe src="http://www.google.com" onload="changelinks(this)"></iframe>
My goal is when click on any link under iframe, destination url will be www.yahoo.com.
any suggestion is welcome.
UPDATE I fetch website in iframe not located in my server.
Since you are using jquery.
function changelinks(iframe) {
var frame = $( iframe ).get(0).contentDocument;
$( 'a', frame ).click(function( event ) {
event.preventDefault();
location.href = 'http://yahoo.com';
});
}
Or changing element attribute:
function changelinks(iframe) {
var frame = $( iframe ).get(0).contentDocument;
$( 'a', frame ).each(function() {
$(this).attr('href', 'http://yahoo.com');
});
}
If the iframe url is an external url you run into an injection security issue...
see this: https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS
this means you can only access DOM on your domain sites.
you can do some php "proxy" hacks, where you can change the href attr but with simple javascirpt its not working.
(btw: there are some greasemonkey ways, but i think this is not an option for your site :))
regards
Thomas
I am new to HTML/Javascript
I want to open a window with javascript, and have it's HTML content loaded from an external source.
I used document.write() but it does not work unless I specifically write the HTML as a parameter
Any idea how to let document.write read from an external source?
Here is what I tried.
win.document.write('<script src="window.html"></script>');
window.html
<html>
<head>
<title>test</title>
</head>
<body>
test
</body>
</html>
If you want to get another page into a new window, then just pass the URL when you create the window...
window.open('win.html', 'popup1', 'width=400,height=200,toolbar=0,location=0,status=0,menubar=0,scrollbars=0,resizable=0');
You may also want to consider using a jQuery UI dialog, purely for presentation purposes :)
Document.write is not the right way.
1) Add jquery.js to your head document.
2) In the header add also this code
<script>
//document ready
$(function(){
var newDiv = $('<div></div>');
newDiv.load('window.html');
//now you have the window.html in the div content
$('body').append(newDiv);
});
or
//Open in new window
$(function(){
window.open('window.html');
});
or
//Open in iframe
var iframe = $('<iframe></iframe>');
iframe.attr('src','window.html');
$('body').append(iframe);
</script>
You must set the size of the div and the iframe.
I just want to access to the DOM in an iframe.
I can display in the Chrome console to the whole iframe definition with the code below :
$('document').ready(function(){
var toto = window.parent.$("#compare_package")[0];
console.log(toto);
});
But I don't find the solution to access to the '#document' content.
I tried :
var toto = window.parent.$("#compare_package")[0].contentDocument;
or :
var toto = window.parent.$("#compare_package")[0].contentWindow;
But it does not work.
Does anyone can help me ?
Thanks in advance for your help.
it only works in same origin policy
// you iframe
<iframe id="some" src=""></iframe>
// bind after iframe content is loaded
$("#some").contents().find('.item');
I am dynamically creating an iframe with javascript inside the body.
iframe = m_oYDOM.get("ifAdwords");
iframe.contentWindow.document.body.innerHTML = <script type=\"text/javascript\">function Test(){alert(\"Success\");Test();}</script>";
I am not able to get the alert to work. Can someone help me!
I got this working
iframe = document.getElementByID("iFrameID");
var oDoc = iframe.contentWindow.document;
oDoc.open();
oDoc.write('<html><body><script type=\"text/javascript\">function Test(){alert(\"success\");}Test();<\/script><\/body><\/html>');
oDoc.close();
.innerHTML is only for text changes... Call the script from another *.html file. OR just add onload to the end of iframe like so:
<iframe src="test.html" onload="alert('Success')";>
Heres an example using jQuery that I use to execute javascript when a frame has loaded, I use it when redirecting the user to download a zip file, to control the browser after the download dialog appears.
Add a div to the page that will hold the iframe:
<div style='height: 1px; width: 1px; border: 0;' id='iframediv'></div>
Then call the following to create the iframe with the onload action:
var url = "http://google.com"
$('#iframediv').html('<IFRAME id="downloadAlbum" onload="loadFunction()" src="'+url+'"></iframe>');
Change url and loadFunction as required.