Replacing HTML source of an iframe document - javascript

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);

Related

D3.js - Add elements in HTML - <script></script> location

I was working with the following tutorial of D3.js: https://www.tutorialspoint.com/d3js/index.htm.
My issue is as follows:
I'm aware of that the location inside the HTML is at the end of the . I mean, I usually put it here:
<body>
<!-- HTML code -->
<script>
<!-- JS code or external JS link -->
</script>
</body>
With this practice, what I'm looking is to run JS after the HTML content renders.
But! When I follow this practice using D3.js, what I discover is that D3.js renders what I add (using d3("html").append(something to append), after the script tags.
For example!
<!DOCTYPE html>
<head>
<title>D3.js Test</title>
</head>
<body>
<div class="div_test">
<h1>I want the D3.js content after this div (but not inside the div)</h1>
</div>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<script>
d3.select("html").append("p").text("I get this text after the script tags");
</script>
</body>
</html>
I'm getting the content as follows:
<!DOCTYPE html>
<html>
<head>
<title>D3.js Test</title>
</head>
<body>
<div class="div_test">
<h1>I want the D3.js content after this div (but not inside the div)</h1>
</div>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<script>
d3.select("html").append("p").text("I get this text after the script tags");
</script>`
</body><p>I get this text after the script tags</p></html>
Questions!
Is the position of the tag correct?
Is there a possibility to keep the flow without adding a to anchor the expected new tag?
Thanks!!!
You can use selection.insert() to insert an element instead of appending it to the DOM. The second argument to that method determines where the newly created element is put into the DOM tree. If you just want to put it in front of the first <script> element you can do something like:
d3.select("body").insert("p", "script") // <-- insert before first <script>
If you need to place it after the <div>, no matter what the next element might look like, you can use the adjacent sibling combinator to select the sibling element directly following the <div> like so:
d3.select("body").insert("p", "div + *") // <-- insert before next element following div

(Confluence) Get an H1 element inside the body of an IFrame

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>

How to replace custom HTML tag with another tag, using the same content?

Is it possible to create your own text contents (text between the HTML tags) of my custom HTML tags?
I used this code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
$(document).ready(function () {
$("eg").replaceWith("<h2>Put the text content of eg here</h2>");
});
</script>
</head>
<body>
<eg>My text</eg>
</body>
</html>
Between the <h2> tags (don’t think I should only use <h2> tags without JS) in my JavaScript code, any text can be placed that I like to have.
Example: <eg>I can type any text here but it’ll be still in h2 tag settings</eg>.
What should I write between <eg></eg> in JS to have any <h2> text content that will be written in my HTML code?
If you want to replace the <eg>Test</eg> with <h2>Test</h2> then you can just do this: $("eg").replaceWith("<h2>" + $("eg").html() + "</h2>");.
Here is an example: http://plnkr.co/edit/urd69pJSXQngGIsYYSjq
If I'm understanding correctly, you just want to append an element to the DOM, so you can just use the html method as follows:
$("eg").html("<h2>Any text can be placed here</h2>");
Have a look at the docs if you need more info.
Note: You closed but didn't open your body tag.
Replace:
</body>
With something like:
<body> <eg> Your custom content is between body tags now </eg> </body>
And you also have two HTML tags, remove the second
<html>
No. It wouldn't be HTML anymore.
However, if you wrote xHTML (which is a form of XML), then you could extend the DOM with your own elements. But that would be XML, not HTML.
And if you tried adding custom elements to a page, browsers wouldn't know what to do with them. Even if some browsers might display them, it's a very bad idea. Use a class name instead.
Creating and using custom tags is a bad idea. It should be avoided.
You are probably looking for this:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
$(document).ready(function () {
$("#my_h2").html("<h2>Any text can be placed here</h2>");
});
</script>
</head>
<h2 id="my_h2"></h2>
</body>
</html>
For more, read-up on CSS selectors. (They are the same as jQuery selectors.)
Hope this helps.

HTML Passing Values between pages in different locations

I am needing to open an html page on server-A and grab some values from server-B's webpage. In other words I want to display server-B's webpage values on server-A's webpage.
The webpage (server-B) data I need the values from is being populated by a source that I do not have access. The values are written into what appears to be a variable that looks like this: [[0]]. When the page is accessed that value [[0]] is populated with current data.
I have unsuccessfully tried to attach a label to the [[0]] to allow reading from server-A with a form post and get methods.
What should my approach be to move this data in [[0]] to server-A webpage?
Server-B page:
<html>
<!-- Head information for the page including page title -->
<head>
<title>Test</title>
</head>
<body color=#FFFFFF>
<!-- Start of your page body -->
<!-- This code displays the current tag value for index 0
[[0]] will be replaced by the tag value a the time the page is loaded -->
The value of the tag with index 0 is [[0]]
<!-- Added code to store [[0]] in div -->
<div class="pink-box" id="thatDiv">[[0]]</div>
</body>
</html>
I added this html/javascript for Server-A and I am getting the an error described with COR:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get Div</title>
<style>
body {
font-size: 12px;
font-family: Arial;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<b>Div:</b>
<ol id="Result"></ol>
<script>
$("#Result").load("http://192.168.1.168/user/default.html #thatDiv");
</script>
</body>
</html>
You can get the contents of the HTML file and find the starting "[[" and the ending "]]" and grab the data in between.
<?php
$serverBFile = "http://www.serverB.com/file.html";
$serverBHTML = file_get_contents($serverBFile);
$serverBStart = stripos($serverBHTML,"[[");
$serverBEnd = stripos($serverBHTML,"]]");
$serverBLength = $serverBEnd - $serverBStart;
$serverBValue = substr($serverBHTML, $serverBStart, $serverBLength);
?>
The way that I have done this in the past is using DOM parsing tools like jQuery.
If you have access to a node.js server, you can use the jQuery plugin to load up server-B's webpage and then query something that's constant with the desired tag, be it ID, classname, tagname, location, etc.
<html>
<!-- Head information for the page including page title -->
<head>
<title>Test</title>
</head>
<body color=#FFFFFF>
<!-- Start of your page body -->
<!-- This code displays the current tag value for index 0
[[0]] will be replaced by the tag value a the time the page is loaded
let's say [[0]] becomes a <div>-->
<div class="pink-box" id="thatDiv">data I want</div>
</body>
</html>
From here, it's fairly easy to extract the text via $('#thatDiv').text() or $('.pink-box').text().
This is a fairly simple solution. Once you get that value into a variable in your node server, just expose a REST call that your server-a webpage can make an AJAX request to.
The reason I say to use node is because it seems that this page has dynamic content that must be loaded with JavaScript. If I knew more about how this page interacted, I would be able to give more specific solutions to your problem,

Change the whole content of iFrame

I have a textarea in which I wan't to add HTML code that will compose a full webpage, and as I type this content will be rendered in an iframe
For example in the textarea I'll write the following code:
<!DOCTYPE html>
<html>
<head>
<title>Live generate</title>
<style></style>
</head>
<body>
</body>
</html>
My problem is that I don't know how to access the iFrame in order to change it's full content so that it matches the one above
you should be able to get the iframe by its id with document.getElementsById or through jquery and then get its document, open it and write to it.
Like:
var iframe = $("iframe"); // or by Id $("#myIframeId")
var doc = iframe.document;
doc.open();
doc.write($("#myTextArea").text());
doc.close();

Categories

Resources