Okay so in my page I have an iframe element which will load HTML that will always have a specific line of HTML code in it that I need to replace when the iframe is loaded. The iframe src will vary so it has to be done as the iframe is loaded. The HTML I want to replace is in the file that's loaded by the iframe and it will look something like this:
<div class="myclass1" style="height:XXXpx; width:YYYpx;">
So what I need is actually for every div that has class="myclass1" to have the height attribute of the style stripped and the width kept whatever it was. All "myclass1" divs will follow this format. So I want to replace all lines like that with this:
<div class="myclass1" style="width:YYYpx;">
I'm not very experienced with javascript at all really so any help, even just pointers, is appreciated because I don't know how to start of even if this is possible.
If the src of the iframe is on the same domain, use this :
var iFrame = document.getElementById("your-iframe-id");
if ( iFrame.contentDocument )
{
iFrameDocument = iFrame.contentDocument;
}
else if ( iFrame.contentWindow )
{
iFrameDocument = iFrame.contentWindow.document;
}
The use iFrameDocument.getElementById or whatever you need
You can use the following example for change the styles of loaded div,Call the javascript function after loading the page .
<html>
<head>
<script type="text/javascript">
function change_style()
{
document.getElementById("div_id").style.width="yyypx";
}
</script>
</head>
<body>
<div id="div_id" class="myclass1" style="height:XXXpx; width:YYYpx;">
-------------------
-------------------
</div>
<script>
change_style();
</script>
</body>
</html>
Related
I am currently using Ace (http://ace.c9.io/) to take code from an editor and execute it within an iFrame. My issue is that when I add something along the lines of
Code in Editor
<script type="text/javascript">
window.onload = function() {
alert("hello");
}
</script>
to the head or body of the iFrame, the code is never executed. This is my current code:
Injecting Code into iFrame
$("#btnRun").click(function(event) {
event.preventDefault();
// iFrame with id="preview"
var preview = $("#preview").contents();
// Get code from editor and wrap in <script> tags
var script = "<script type='text/javascript'>" + ace.edit("js-editor").getSession().getValue() + "</script>";
// Append code to head or body, in this case head
preview.find("head").append(script);
});
The code is successfully added to the iFrame, however it is never executed. I can also successfully add HTML/CSS and it displays in the iFrame, but the javascript is never touched.
I have tried wrapping the code in script tags within the editor only, as well as using an escape character on the closing tag: "</script>" but to no avail.
This is the iFrame in my index.html document.
iFrame in index.html
<iframe class="editor" id="preview" name="result" sandbox="allow-forms allow-popups allow-scripts allow-same-origin" frameborder="0">
#document
<!-- Editor content goes here -->
</iframe>
After the code is injected the iFrame looks like this
iFrame with Injected Code
<iframe class="editor" id="preview" name="result" sandbox="allow-forms allow-popups allow-scripts allow-same-origin" frameborder="0">
#document
<html>
<head>
<script type="text/javascript">
window.onload = function() {
alert("hello");
}
</script>
</head>
<body>
</body>
</html>
</iframe>
Also when calling the window.onload or window.top.onload event from within the iFrame, the code executes but only affects the page containing the iFrame and not the contents of the iFrame itself.
Thank you.
Note: When the code is not within window.onload it runs fine. However I wish to be able to execute this code when the frame's onload function is executed.
I would think that you are adding the JS to the iframe after the onload event has already fired.
Perhaps you could try simulating an event to run the preview code or dispatching the onload event again?
Might help: https://developer.mozilla.org/en-US/docs/Web/API/Window.dispatchEvent
I was able to fix this myself. The problem was that appending the script to be within the iFrame wasn't enough to make it work. To make the script only be executed within the iFrames DOM was to write directly to it.
$("#btnRun").click(function(event) {
event.preventDefault();
var previewDoc = window.frames[0].document;
var css = ace.edit("css-editor").getSession().getValue();
var script = ace.edit("js-editor").getSession().getValue();
var html = ace.edit("html-editor").getSession().getValue();
previewDoc.write("<!DOCTYPE html>");
previewDoc.write("<html>");
previewDoc.write("<head>");
previewDoc.write("<style type='text/css'>" + css + "</style>");
previewDoc.write("<script type='text/javascript'>window.onload = function() {" + script + "}</script>");
previewDoc.write("</head>");
previewDoc.write("<body>");
previewDoc.write(html);
previewDoc.write("</body>");
previewDoc.write("</html>");
previewDoc.close();
});
I think it would be more elegant to use the contentDocument property of the iframe, and then inject the script and trigger the parser so it actually interprets it as JavaScript.
I put up a small proof of concept on github. I hope it solves your problem in a more elegant manner.
https://github.com/opreaadrian/iframe-injected-scripts
Cheers,
Adrian.
I stumbled a website like this, let's call it home.html
<body>
<iframe id='id1' src="1.html">
</iframe>
</body>
In 1.html, we got
<body>...
<iframe id='id2' src="2.html">
</iframe>
...
</body>
How can I get the HTML content of 2.html with JavaScript? The reason I do not go directly to 2.html to get the content is because the content is simply a template and get changed dynamically at the home.html
Usually, i would just do like below to get the content of an iframe id but it doesn't work in this case.
var e = document.getElementById('myid').html;
Thank you.
Try this,
var iFrame = document.getElementById('id1');
var iFrameBody= iframe.contentDocument || iframe.contentWindow.document;
content= iFrameBody.getElementsByTagName('body')[0].innerHTML;
alert(content);
your iframes src should be same to your main page domain. Different domain content access is blocked by browsers. Same domain iframe contents can be accessed.
It is not enough to copy just BODY tag content between iframes, but you need to copy HEAD tag content as well to get the same design of new iframe
var iFrameDocument= iframe.contentDocument || iframe.contentWindow.document;
alert(iFrameDocument.head.innerHTML);
alert(iFrameDocument.body.innerHTML);
If you want to copy the body with his properties you can now do :
iframe1.contentWindow.document.body = iframe2.contentWindow.document.body.cloneNode(true);
cloneNode(true) will copy every child of the specified node
I'm loading a content dynamically to the <iframe>
<iframe style='border:none;' id='abc' src="http://localhost:39217/Home/GetContent/some_dynamic_code"></iframe>
after a success response, in that iframe is that content
<html>
<head>
<script type="text/javascript">
function onPageLoad() {
if (document.readyState === "complete") {
var cont = document.getElementById("abc");
alert(cont);
}
}
</script>
</head>
<body onload='onPageLoad()'>
<a target="_blank" href='http://lorem'>
<img class='abc' style='max-width:300px; max-height: 38px;' alt='' src='/Images/image.png' />
</a>
</body>
</html>
That iframe will be using outside my site (by users), but I want to have the ability to change the <img> src. But, I need also to change the width/height of the iframeafter I change the image. So, how can I get the access to that iframe using JS ? That code above alerts me null
I made an example for you here: http://jsfiddle.net/KRaWU/2/
I use jQuery to achieve that and I suggest you do the same.
// this will find a button within an iframe
var obj = $('iframe').contents().find('.actionButton').find('input[type="submit"]');
// this will change the value of the button, and you can see that the text is changed.
obj.attr('value', 'LOG ME IN');
You can analogically find an img and change its src.
JS interaction between iFrames and their parents is for what I know impossible or at least troublesome. I know there is somewhere a property window.frames and maybe even frame.parent but in general, JS interaction like that is impossible. I think you should consider another type of solution (like an ajaxcall maybe, if that could satisfy your needs).
I want to add a javascript google ad but I can't insert the javascript into the div using jquery. I try to simulate my problem with this test, which is using some advice I found on stackoverflow , but it does not work.
I want <script type='text/javascript'>document.write('hello world');</script> to be inserted in the div, and "hello world" be displayed between the tag_1 and tag_2.
Here is the code :
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var str="<script type='text/javascript'>document.write('hello world');";
str+="<";
str+="/script>";
$('#insert_here').append(str);
});
</script>
</head>
<body>
tag_1<br/>
<div id="insert_here">
</div>
tag_2<br/>
</body>
</html>
Tanks for your answers,
Lucas
See my answer to Are dynamically inserted <script> tags meant to work? for why you can't use innerHTML, which jQuery's functions map to when passed a HTML string, to insert a script element. document.write will also fail when used after the document has been fully parsed.
To work around this, you will have to use DOM functions to insert an element into the div. Google ads are iframes, so it's usually a case of finding the iframe code and appending that instead.
To correctly insert a script element, you need to use DOM functions, for instance:
var txt = 'alert("Hello");';
var scr = document.createElement("script");
scr.type= "text/javascript";
// We have to use .text for IE, .textContent for standards compliance.
if ("textContent" in scr)
scr.textContent = txt;
else
scr.text = txt;
// Finally, insert the script element into the div
document.getElementById("insert_here").appendChild(scr);
I figured out a great solution:
Insert your Google Adsense code anywhere on your page - e.g. if your CMS only allows you to put this on the right hand side then stick it there.
Wrap a div around it with display:none style
Add some jquery code to move the div to the location you desire.
Since the javascript has already run there is no problem then with moving the block of script to wherever you'd like it to be.
e.g. if you wish to put 2 blocks of google adverts interspersed throughout your blog (say after paragraph 1 and after paragraph 4) then this is perfect.
Here's some example code:
<div id="advert1" style="display:none">
<div class="advertbox advertfont">
<div style="float:right;">
<script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxxxx";
/* Video box */
google_ad_slot = "xxxxxxxxxxxxxxxxx"
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#advert1').appendTo("#content p:eq(1)");
$('#advert1').css("display", "block");
});
</script>
p.s. #content happens to be where the content starts on my CMS (Squarespace) so you can replace that with whatever you have in your CMS. This works a treat and doesn't break Google ToS.
You cannot use document.write after the page has finished loading. Instead, simply insert the contents that you want to be written in.
<script type="text/javascript">
$(function() { // This is equivalent to document.ready
var str="hello world";
$('#insert_here').append(str);
});
</script>
I have something like this:
<!doctype html>
<html>
<body>
<iframe id="someFrame"></iframe>
</body>
</html>
And I would like to use jQuery to write elements such that the full equivalent HTML would be like this:
<!doctype html>
<html>
<body>
<iframe id="someFrame">
<!-- inside the iframe's content -->
<!-- <html><body> -->
<div>A</div>
<div>B</div>
<div>C</div>
<!-- </body></html> -->
</iframe>
</body>
</html>
Alternatively, any plain-old-Javascript would be fine.
Thanks.
Edit: After a little more research, it seems I am looking for an IE-equivalent of the contentDocument property of an iframe. "contentDocument" is a W3C standard which FF supports, but IE does not. (surprise surprise)
You can do both, you just have to target differently:
var ifrm = document.getElementById('myIframe');
ifrm = ifrm.contentWindow || ifrm.contentDocument.document || ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write('Hello World!');
ifrm.document.close();
After some research, and a corroborating answer from Mike, I've found this is a solution:
var d = $("#someFrame")[0].contentWindow.document; // contentWindow works in IE7 and FF
d.open(); d.close(); // must open and close document object to start using it!
// now start doing normal jQuery:
$("body", d).append("<div>A</div><div>B</div><div>C</div>");
There are two reliable methods to access the document element inside an iframe:
1. The window.frames property:
var iframeDocument = window.frames['iframeName'].document; // or // var iframeDocument = window.frames[iframeIndex].document;
Demo
2. The contentDocument property:
var iframeDocument = document.getElementById('iframeID').contentDocument; // or // var iframeDocument = document.getElementById('iframeID').contentWindow.document;
Demo
I am going out on a limb here and suggest that the answers proposed so far are not possible.
If this iframe actually has a src="somepage.html" (which you ought to have indicated, and if not, what is the point of using iframe?), then I do not think Jquery can directly manipulate html across frames in all browsers. Based on my experience with this kind of thing, the containing page cannot directly call functions from or make any sort of Javascript contact with the iframe page.
Your "somepage.html" (the page that loads in the iframe) needs to do two things:
Pass some kind of object to the containing page that can be used as a bridge
Have a function to set the HTML as you desired
So for example, somepage.html might look like this:
<!doctype html>
<html>
<head>
<script src="jquery.js">
</script>
<script language=JavaScript>
<!--//
var bridge={
setHtml:function(htm) {
document.body.innerHTML=htm;
}
}
$(function() { parent.setBridge(bridge); });
//--></script>
</head>
<body></body>
</html>
and the containing page might look like this:
<!doctype html>
<html>
<head>
<script src="jquery.js">
</script>
<script language=JavaScript>
<!--//
var bridge;
var setBridge=function(br) {
bridge=br;
bridge.setHtml("<div>A</div><div>B</div><div>C</div>");
}
//-->
</script>
</head>
<body><iframe src="somepage.html"></iframe></body>
</html>
This may appear a bit convoluted but it can be adapted in a number of directions and should work in at least IE, FF, Chrome, and probably Safari and Opera...
I have found this to be cross-browser compatible... a little crossing of previous answers and a bit of trial & error of my own. :)
I'm using this for a download of a report, or, if an error (message) occurs, it's displayed in the iFrame. Most of the users will probably have the iFrame hidden, I'm using it multi-functional.
The thing is I have to clear the contents of the iFrame every time I click the report download button - the user can change parameters and it happens there are no results which then is displayed in the iFrame as a message. If there are results, the iFrame remains empty - because the code below has cleared it and the window.open(...) method generates a Content-Disposition: attachment;filename=... document.
var $frm = $("#reportIFrame");
var $doc = $frm[0].contentWindow ? $frm[0].contentWindow.document : $frm[0].contentDocument;
var $body = $($doc.body);
$body.html(''); // clear iFrame contents <- I'm using this...
$body.append('<i>Writing into the iFrame...</i>'); // use this to write something into the iFrame
window.open(Module.PATH + 'php/getReport.php' + Report.queryData, 'reportIFrame');
I do not have a browser that supports contentDocument but I've coded it this way so I'm leaving it. Maybe someone has older browsers and can post compatibility confirmation/issues?