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
Related
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 need to create an iframe dynamically, set its html, then return it as a function so it can be called later with newAdUnit(). Right now it returns [object HTMLIFrameElement]. I'm trying to figure out a way to do this all from one function. The reason for this is I'm setting up ads that need to be loaded in dynamically. A single function would make my code a lot cleaner since I can call it in a number of different ways. Any ideas?
<script>
function newAdUnit(size) {
var iframe = document.createElement('iframe');
iframe.onload = function() {
iframe = iframe.contentWindow.document;
var html = '<body>This is a test</body>';
iframe.open();
iframe.write(html);
iframe.close();
};
return iframe;
}
</script>
<div id="test">
<script>document.getElementById("test").innerHTML = newAdUnit()</script>
</div>
It will be so much easy if you use JQuery for the current operation. The code below shows how to
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
function newAdUnit(obj) {
var iframe = document.createElement('iframe');
iframe.onload = function() {
iframe = iframe.contentWindow.document;
var html = '<body>This is a test</body>';
iframe.open();
iframe.write(html);
iframe.close();
};
$(obj).append(iframe);
}
newAdUnit($('#test'));
});
</script>
</head>
<body>
<div id="test">
</div>
</body>
</html>
You should only use .innerHTML when the thing you want to add is a string of HTML. However, in your case, you have a HTMLIFrameElement object, and so, you can't use .innerHTML in this case. Currently, Javascript is implicitly calling .toString() on your element object returned by newAdUnit(), which results in [object HTMLIFrameElement].
Instead, when you want to add a node element to another element, you can use .appendChild() like so:
<div id="test"></div>
<script>
function newAdUnit(size) {
var iframe = document.createElement('iframe');
iframe.onload = function() {
iframe = iframe.contentWindow.document;
var html = '<body>This is a test. The size is ' + size + '</body>';
iframe.open();
iframe.write(html);
iframe.close();
};
return iframe;
}
document.getElementById("test").appendChild(newAdUnit(10));
</script>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 5 years ago.
Would anyone know why I’m able to get my code to run on codepen, but not on my desktop? I keep getting a “can't read appendChild” error when I run my code on my desktop. I am new to coding and just started teaching my self how to manipulate the DOM.
https://codepen.io/unicorn1/pen/JpYqjJ
const container = document.querySelector('#container');
const content = document.createElement('div');
content.classList.add('content');
content.textContent = 'Dom text-content!';
container.appendChild(content);
Error Message
the script should be put at the bottom before the body ends
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>
THE TITLE OF YOUR WEBPAGE
</h1>
<div id="container"></div>
<script>
const container = document.querySelector('#container');
const content = document.createElement('div');
content.classList.add('content');
content.textContent = 'Dom text-content!';
container.appendChild(content);
</script>
</body>
</html>
or you can put the content of script in the window.onload callback like this:
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
window.onload = function() {
const container = document.querySelector('#container');
const content = document.createElement('div');
content.classList.add('content');
content.textContent = 'Dom text-content!';
container.appendChild(content);
};
</script>
<h1>
THE TITLE OF YOUR WEBPAGE
</h1>
<div id="container"></div>
</body>
</html>
the principle is that,you can manipulate DOM after the DOM have loaded;you can't manipulate DOM before loaded.that is how window.onload and script position works;
also ,you can change the window.onload to DOMContentLoaded
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
document.addEventListener('DOMContentLoaded', function() {
const container = document.querySelector('#container');
const content = document.createElement('div');
content.classList.add('content');
content.textContent = 'Dom text-content!';
container.appendChild(content);
}, false);
</script>
<h1>
THE TITLE OF YOUR WEBPAGE
</h1>
<div id="container"></div>
</body>
</html>
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.
This code is generating a random link from variable but that link is not opening in iframe I need to display random links in iframe whenever the button is clicked. How to do that?
<html>
<script>
var cat1 = [
"http://arborjs.org",
"http://cartodb.com",
"http://vis4.net/labs/185"
];
var myFrame = document.getElementById("frame");
getRandomUrl(myFrame);
function getRandomUrl(myFrame) {
var index = Math.floor(Math.random()*cat1.length);
var url = cat1[index];
document.getElementById('frame').src = url;
}
btn.addEventListener("click", function() {
getRandomUrl(myFrame);
});
</script>
<body>
<button id="btn">Click</button>
<br>
<iframe id="frame" src="" style="width:500px; height: 500px"></iframe>
</body>
</html>
You have to put the script tag after all your HTML or wait for the window to load.
Also, you're calling a function before it's defined.
This code is generating a random link from variable
I don't think this is happening, if you open your console it should tell you the function and iframe are both undefined, as I stated above.