Background
I am attempting to read (and eventually change) content within the body of an IFrame (in my example this involves h1 tags) embedded in a Confluence page.
Confluence Behavior
Initially I didn't think it was significant, but as comments by #ScottMarcus illustrate; it does matter that this work is for a possible Confluence plugin. This is because I am using a page decorator containing JavaScript that executes when a user edits a Confluence page.
IFrame Restrictions
This means that (to my knowledge) I cannot have JavaScript execute after the editable IFrame has been added to the DOM. It also means that I cannot control what content is added to the IFrame (although this is OK/expected, as the idea is to enhance the user experience if they add tables and install the plugin).
Example
For reference, here is what the wysiwyg Confluence editor looks like for my page (annotated with a couple key elements from my HTML below):
Problem
Although I have been able to read/log the HTML present within the IFrame, I cannot seem to access elements in the same way I am able to within the main document. I have tried different variations on what I have below, doing things like...
selecting elements by ID--for some reason this seems less reliable in this context?
trying to get the contents() or children() of elements--in many cases I get null reference exceptions when trying this
accessing the body from my IFrame object--again, this doesn't seem the same as doing document.body
JavaScript
function doStuff() {
$('#wysiwygTextarea_ifr').ready(function () {
let iFrame = document.getElementById('wysiwygTextarea_ifr');
let frameDoc = iFrame.contentDocument ? iFrame.contentDocument : iFrame.contentWindow.document;
let h1Tags = frameDoc.getElementsByTagName('h1');
//would like to iterate over the collection of h1 tags here, but it always seems to be empty
});
}
HTML
<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="../Libraries/main.js" type="text/javascript"></script>
<script type="text/javascript">
doStuff();
</script>
<iframe id="wysiwygTextarea_ifr">
#document
<!DOCTYPE html>
<html>
<head>
<title>blah</title>
</head>
<body id="tinymce">
<h1 id="meh">abcde table</h1>
<h1 id="neh">zzz</h1>
</body>
</html>
</iframe>
</html>
Related
Chrome v75 appears to have introduced a bug whereby if you replace an iFrame's src programatically, it will replace the entire page instead of the iFrame.
This didn't happen on v74 and I can't get a test case to work (yet), it just fails in our site. (The site hasn't changed since going from v74 to v75, only Chrome has changed)
It appears to work fine the first time but then when you change it again (in our case viewing report drill downs) it causes the entire page (i.e. the iFrame's Parent) to load the src you were trying to load into the iFrame.
It also doesn't matter if you use pure Javascript or (in our case) JQuery, both cause the same issue.
EDIT: After a few hours detective work, I've found the bug. Setting the tag in the iFrame's content causes Chrome to load the iFrame's content into it's parent rather than the iFrame itself.
I've setup a Plunker account with a demo: https://plnkr.co/edit/UQ0gBY?plnkr=legacy&p=info
Just so I can post the link to Plunker, here is the code for the main file & the iframe content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function onLoaded() {
// find element
let button = document.getElementById("button");
button.addEventListener("click",function(e){
// Add a random number on the end as a cache buster
document.getElementById('frame-finance-custom').src = 'test2.html?rnd=' + Math.random();
},false);
};
document.addEventListener('DOMContentLoaded', onLoaded, false);
</script>
</head>
<body>
<div>IFrame Src Changing Test</div>
<div>
<div id="div-frame-finance-custom" style="float:left;width:33%">
<iframe id="frame-finance-custom" name="frame-finance-custom" class="iframe"
style="border:1px solid black; width: 100%; height: 350px; overflow-y: scroll; vertical-align: top;">
no data
</iframe>
</div>
<div style="float:left;margin-left:1em;">
Detail: Loading an iframe page with a <Base> tag in it with target set to "_parent" will cause any refresh of that frame to replace the parent document<BR>
<BR>Instruction: <UL><LI>Click the 'Update Frame' Button, this will load test2.html into the frame. <LI>Click it again & it will replace the iframe's parent with the content of the iFrame.</UL>
<BR>Confirmation: Remove the <Base> tag from the header of test2.html & reload, it will work as expected.
</div>
</div>
<br clear=both>
<div>
<button id="button">
Update Frame
</button>
</div>
</body>
</html>
IFrame Content (test2.html):
<!DOCTYPE html>
<html lang="en">
<head>
<base target="_parent"/>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>This is the frame content</div>
</body>
</html>
Note, using their new layout it doesn't work, but using their legacy layout it does. Feel free to save the files locally and use chrome directly too.
Ok, so this turned out to be a bug in Chrome rather than anything else, so yes, strictly not a SO question, but seeing as SO ranks so well in Google (other search engines are available), I thought it better to leave it here as a solution rather than simply delete it, just incase anyone else has a similar problem.
The reason is outlined as an edit in my question, the solution is to remove the <base target="_parent"> tag from the iFrame and programatically add the 'target="_parent"' attribute to any links in the iFrame.
We do this via jQuery, I'm sure its just as easy via vanilla Javascript.
$('a').attr('target','_parent');
Add that to the javascript that runs when a page has loaded and it'll replace add target="_parent" to any links on the page.
e.g.
<script>
function onLoaded() {
// find all links and add the target attribute
$('a').attr('target','_parent');
};
document.addEventListener('DOMContentLoaded', onLoaded, false);
</script>
As #Kaiido says in his comment, its apparently fixed in Chrome v77, but this isn't the current (as of June 2019) stable release, so we've had to add the workaround into production so that our CRM works with Chrome v75. Thanks to #Kaiido for confirming that.
I am working on a page that will display the contents of a database field. The contents are in HTML format and includes an entire webpage
<html>
<title>Some title</title>
<style type="text/css">
/* CSS content here */
</style>
<body>
<!-- body content here -->
</body>
</html>
I need to display all of this inside another webpage so I thought using an iframe would allow me to negate any css from the parent page. However, I cannot figure out how to overwrite the contents of the iframe document.
What I've done so far is retrieve the data and then use the following
$("#iframe_constainer")
.find('iframe:first').contents().find('html:first').html(myHTML);
My web page includes a div called iframe_container which contains an iframe.
<div id="iframe_container"><iframe/></div>
This is working okay, but the contents of myHTML are getting wrapped inside html tags. So the effect is like this
<html>
<html>
<title>Some title</title>
<style type="text/css">
/* CSS content here */
</style>
<body>
<!-- body content here -->
</body>
</html>
</html>
I know it's because I'm finding the html tag in the iframe and changing the HTML. Is there a way to overwrite the entire document using jQuery?
Opening the document and closing afterwards will fix the issue with appending the content
var iframe = document.getElementById('iframeID');
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(htmlData);
iframe.contentWindow.document.close();
You don't really need jQuery for this, just use document.write to write content to the iframe to completely replace iframe's document.
E.g. (in plain vanilla JS)
document.getElementById("myIframeId").contentWindow.document.write(myHTML);
How do I add text/elements to a target element (div) using getElementById (without jquery) when the page loads?
Here's my markup currently:
<html>
<head>
<title>test</title>
<script language="javascript">
/document.getElementById('content').innerHTML = 'Fred Flinstone';
</script>
</head>
<body>
<div id="content">
dssdfs
</div>
</body>
</html>
<script type="text/javascript">
function dothis()
{
document.getElementByID('content').innerHTML = 'Fred Flinstone';
}
</script>
<body onLoad="dothis()">
...
</body>
I think what is happening is that your script is executing before your document is ready. Try placing your javascript in a body load event.
The quickest (although not the best) way to do it is to put your script block towards the end of the HTML file (after the <div> you wish to modify).
The better way to do it is to register for DOM load notification
If you want it to execute after the page loads, then you need to observe the DOM loaded event. You can do that by subscribing to the DOM load event in the script block and then put the code that manipulates the DIV in the event handler.
The tricky part is that different browsers may need slightly different ways to register to be notified when the DOM is loaded (that's were jQuery or a different library becomes useful)
Here's some more information about different ways to register for a callback to be called when the DOM is loaded. The information may be a bit out of date as more modern versions of the popular browsers have become more standards compliant now: http://www.javascriptkit.com/dhtmltutors/domready.shtml
I want to get content of script tag example
now see above in src property load bolo7.com content i want to catch that contain
i have try so many method but it doesn't work
try 1 -> document.getElementById("data").innerHTML; //doesn't work
try2 -> document.getElementById("data").text; //doesn't work
if you are intelligent in javascript please give me answer that how to get content of script inside content
thanks in advance for your answer
my website is : http://www.bolo7.com/
The text property defined by the HTMLScriptElement interface is the text content of the script element. If the element uses a src attribute, it should not have any content so its text property will be an empty string.
In that case, you will need to access the src some other way, perhaps XMLHttpRequest will suit.
Note also that the id attribute for script elements is not valid for the DOCTYPE being used at the linked resource (and the document is invalid).
Something like this?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
//some data here
function add1(x) {
return 1 + x;
}
</script>
<script type="text/javascript">
alert(document.getElementsByTagName("script")[0].innerHTML);
</script>
</head>
<body>
</body>
</html>
but RobG is right, only works for inline javascript.
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>