I have a complete HTML5 page in a JSON object, I have to show it to my page inside a div or iframe. Following is sample code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
window._reviewWidget = {
onReady: function () {
var block1 = {
voyagerId:"xxxxxxx",
container: "container",
flavour:"small"
};
_reviewWidget.loadReview(block1);
}
};
(function (W,i,D,G,E,T)
{
W[G] = W[G] || {};
T = i.getElementsByTagName(D)[0];
E =i.createElement(D);
E.async = 1;
E.src ='/js/reviewWidget.js';
T.parentNode.insertBefore(E, T);
})(window, document,'script','_reviewWidget');
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
When I am trying to put the code in div or iframe getting just container div, header part and body, HTML tag missing. I know we can't put such tags in div so I tried an iframe as well. But same issue either can see whole code as text or just container div.
Iframe code i am using (html_code JS variable with above HTML code)
Type-1
$('#HtmlFrame').contents().find('body').html(html_code);
Type-2
var iframe = document.createElement('iframe');
var ctnr = document.getElementById('Ewidget');
ctnr.appendChild(iframe);
iframe.contentWindow.document.open('text/htmlreplace');
iframe.contentWindow.document.write(html_code);
iframe.contentWindow.document.close();
Thanks.
Related
How can I embed an iframe using JavaScript, that's being displayed where the code's being added? The code below displays the iframe ONLY above the footer, no matter where I add the code, whether it's in the header or the body.
var iframe_tag = document.createElement("iframe");
iframe_tag.setAttribute("src", "https://wikipedia.com");
iframe_tag.style.width = "100%";
iframe_tag.style.height = "480px";
document.body.appendChild(iframe_tag);
I know there are simpler ways to show an iframe, but I can only use JavaScript.
When you use document.body.appendChild it is identical to just writing in the new html at the bottom, or literly appending the element to the bottom
This means that regardless of where the script is, it will always do this
instead you should append to a predefined div (<div id="iframecontainer"> </div>)
let container = document.getElementById("iframecontainer");
container.appendChild(iframe_tag);
minimal example:
<!DOCTYPE html>
<html>
<body>
<script>
let iframe = document.createElement("iframe");
iframe.src = "https://wikipedia.com/";
window.onload = () => {
document.body.appendChild(iframe);
}
</script>
</body>
</html
In my opinion you should, instead of creating an appending an element, just set the src of a pre-existing iframe (<iframe id="iframe"> </iframe>)
let iframe_tag = document.getElementById("iframe");
iframe.src = "https://wikipedia.com";
minimal example:
<!DOCTYPE html>
<html>
<body>
<iframe id="iframe"> </iframe>
<script>
let iframe;
window.onload = () => {
iframe = document.getElementById("iframe");
iframe.src = "https://www.wikipedia.com/";
}
</script>
</body>
</html
I am trying to manipulate an iframe (chatbox) when loaded on a webpage.
The chatbox loads four iframes with changing id with each pageload.
Because the iframe that needs to be manipulated is the last / 4th of the list, i used get elements by tagname ("iframe").
However, no style is added to the last iframe:
<script>
window.onload = function() {
let myiFrame = document.getElementsByTagName("iframe");
let doc = myiFrame[3].contentDocument;
doc.body.innerHTML = doc.body.innerHTML + "<style>iframe{dispay:block !important}</style>";
}</script>
use
myiFrame[3].style.cssText = "display:block !important"
your code will become
<script>
window.onload = function() {
let myiFrame = document.getElementsByTagName("iframe");
myiFrame[3].style.cssText = "display:block !important";
}
</script>
Sample working code:
<!DOCTYPE html>
<html>
<body>
<p id="myP1" style="display: none!important">This is some text.</p>
<input type="button" onclick="demoDisplay()" value="Show">
<script>
function demoDisplay() {
document.getElementById("myP1").style.cssText = "display:block !important";
}
</script>
</body>
</html>
I have one HTA file, one JS file is enqueued to the HTA file and HTML files with contents are loaded into the HTA file.
For example this is my_hta_file.hta
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="x-ua-compatible" content="ie=9.0" />
</head>
<body></body>
</html>
<script type="text/javascript" src="my_js_file.js"></script>
and this is my_js_file.js
function getFileContent(filePath) {
var fileStream = new ActiveXObject('ADODB.Stream');
fileStream.Type = 2;
fileStream.Charset = 'utf-8';
fileStream.Open();
fileStream.loadFromFile(filePath);
var fileContent = fileStream.ReadText();
fileStream.Close();
return fileContent;
}
// initial loading of home page
document.body.innerHTML = getFileContent('index.html');
var pageLinks = document.querySelectorAll('a');
for(i = 0; i < pageLinks.length; i++) {
var linkHref = pageLinks[i].getAttribute('href');
pageLinks[i].setAttribute('href','#!'+linkHref);
// I add this leading prefix to prevent following by the link when click by it
pageLinks[i].onclick = function() {
var page = this.getAttribute('href').substring(3);
if(page == '') {
var page = 'index';
}
// load HTML of the page by link path when click by the link
document.body.innerHTML = getFileContent(page+'.html');
}
}
and my HTML files with contents are:
index.html
Home
Second
Third
<div>Home page content</div>
second.html
Home
Second
Third
<div>Second page content</div>
third.html
Home
Second
Third
<div>Third page content</div>
When I click by a link, I need to load all the HTML content from the HTML file by the link path including the very links I click by.
If I open my HTA file and click the link "Second", I get the second page links and content successfully.
But after that if I click the link "Third", I get the error
Cannot find file 'file:///D:/third' ...
How to resolve the problem?
UPDATE 1
If I move my script to the bottom of the HTA body and add a div for loading HTML for example
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="x-ua-compatible" content="ie=9.0" />
</head>
<body>
<div id="body"></div>
<script type="text/javascript" src="my_js_file.js"></script>
</body>
</html>
and in my JS file load HTML into div i.e.
document.getElementById('body').innerHTML = ...
instead of
document.body.innerHTML = ...
the problem still remains
As said in the comments, all the links with attached event listeners are replaced by new elements when innerHTML is changed. These new links don't have the listeners which the old elements had.
The snippet below shows how you can use a function to reinit the listeners. The snippet assumes a content wrapper element is used (as you already seem to use it). I've also simplified the code a bit, and used more modern JS (since IE9 mode is used in the OP).
function getFileContent (filePath) {
// As it currently is
}
// Handles clicks on the links
function newContent (e) { // e contains information of the current event
var path = e.target.href || 'index',
body = document.getElementById('body');
e.preventDefault(); // Prevents the default action of the clicked link
body.innerHTML = getFileContent(path + '.html');
init(); // Initialize the new content
return;
}
// Initializes the page
function init() {
var links = document.querySelectorAll('a'),
i, ei;
for (i = 0, ei = links.length; i < ei; i++) {
links[i].addEventListener('click', newContent);
}
return;
}
// Initialize the first page
init();
I am trying to append some CSS and JS to my static HTML file. CSS and JS files are stored in the same folder. It sounds stupid, but I need to do that. So, CSS and JS have been appended but they are not applying to a HTML file because background should be red.
The path that I created is correct because if I do inspect element on Chrome Devtools and click to appended link it opens what I need. So, there are no errors, scrip appends what I need, but I see no result.
My HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
</head>
<body>
hello world
<script>
const href = window.location.pathname;
const chunkIndex = href.lastIndexOf('/');
const path = href.slice(0, chunkIndex + 1);
function appendScripts() {
const script = document.createElement("script");
script.src = path + "scripts.js"; // use this for linked script
document.body.appendChild(script);
}
function appendCSS() {
link=document.createElement('link');
link.href= path + 'styles.css';
link.rel='rel';
document.getElementsByTagName('head')[0].appendChild(link);
}
document.addEventListener("DOMContentLoaded", function(event) {
appendCSS();
appendScripts();
});
</script>
</body>
</html>
My CSS file:
body {
background-color: red;
}
You need to fix the following line
link.rel='rel';
to
link.rel='stylesheet';
I have the following code, which basically toggles through a bunch of images.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var num = 1;
img = document.getElementsByTagName("img")[0];
hbutton = document.getElementsByTagName("h1")[0];
hbutton.onclick = function() {
num += 1;
img.src = num + ".jpg";
}
</script>
</head>
<body>
<h1>Press Here!</h1>
<img src = "1.jpg"></img>
</body>
</html>
For some reason, when I run it, nothing happens, because of the following error as displayed by my Firebug console.
hbutton is undefined
---
hbutton.onclick = function() {
When I run just the JS after the page has loaded however, it works perfectly fine!!! Why is this?
Your code is executing before the h1 tag is defined. You must run it in an onload handler or put it just before /body
JavaScript is interpreted top-to-bottom. So at the place where your <script> executes, no h1 tags are known yet.
Try putting the <script>-Tag to the bottom of your page. Otherwise, if you need the script at the beginning of the page, an onLoad-Handler might help:
<script type="text/javascript">
function onLoadHandler() {
// your original javascript code here...
}
</script>
<body onload="onloadHandler()">
<!-- HTML Code here-->
When you put it in the header, your h1 is not loaded yet. hbutton becomes undefined, not an object. Then when you try to set .onclick, it breaks because you cant set properties of something undefined. When you put the code in the body, your h1 is already loaded, so the code works as you expected it to.
You can fix this by leaving your code at the top, but only calling it after an onload event.
The head gets executed before the dom is loaded. Put it on the button of the page or put an onload function in the body tag.
It cannot find document.getElementsByTagName("img") when the Document isnt ready yet, because it is simply not there yet.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function onDocumentReady(){
var num = 1;
img = document.getElementsByTagName("img")[0];
hbutton = document.getElementsByTagName("h1")[0];
hbutton.onclick = function() {
num += 1;
img.src = num + ".jpg";
}
}
</script>
</head>
<body onload="onDocumentReady()">
<h1>Press Here!</h1>
<img src = "1.jpg"></img>
</body>
</html>
or simply do this:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Press Here!</h1>
<img src = "1.jpg"></img>
<script type="text/javascript">
var num = 1;
img = document.getElementsByTagName("img")[0];
hbutton = document.getElementsByTagName("h1")[0];
hbutton.onclick = function() {
num += 1;
img.src = num + ".jpg";
}
</script>
</body>
</html>
The problem is that the script is being executed immediately it is encountered during page load.
Since it's at the top of the page, in the header, this means that it is executed before the page has loaded the <h1> element (or any of the rest of the body).
Therefore, when it asks for getElementsByTagName('h1'), there aren't any matching elements at that moment in time.
You need to either:
* move the code to the end of the script.
* or wrap it in a function, and trigger the function to execute when the page has finished loading -- ie use the onload method.