Javascript iframe src page adding dynamic input not working - javascript

I want to add input in a div content javascript but it doesn't add
HTML:
<button onclick="Addcompntn();" class="btn btn-success">Add</button>
<iframe class="embed-responsive-item" src="index.html" allowfullscreen id="if1"></iframe>
Script:
function Addcompntn() {
var framedeki = document.getElementById('if1').contentWindow.document;
$('example').append('<div id="innerdiv" style="color:white;"></div>');
}
index.html
<div id="example" style="z-index:2"> //dynamic data will come here </div>

Try adding element to the iframe document body:
function Addcompntn() {
var framedeki = document.getElementById('if1').contentWindow.document;
var div = document.createElement("div");
div.id = 'innerdiv';
div.style.color = 'white';
framedeki.getElementById('example').append(div);
}

Related

Adding Div With IFrame Through JavaScript

I need to newProductPanelContainer insie replaceclass="Replace" through JS. I'm wondering why this doesn't add anything? I'm adding an iframe to it.
Where to add
<div class="Replace">
<div class="hello">Hello</div>
<div class="hi">Hi</div>
<div class="yes">Wait</div>
</div>
Expected Output
<div class="Replace">
<div class="hello">Hello</div>
<div class="hi">Hi</div>
<div class="yes">Wait</div>
<div class="newProductPanelContainer">
<iframe id="productPanelIFrame" src="https://test.com" width="100%" height="100%" style="border: none"></iframe>
</div>
</div>
Iframe div
<script type="text/javascript">
var innerDiv = document.createElement("div");
innerDiv.className = 'newProductPanelContainer';
innerDiv.innerHTML = `<iframe id="productPanelIFrame" src="https://test.com" width="100%" height="100%" style="border: none"></iframe>`;
innerDiv.style.width = "100%";
var hello = document.getElementsByClassName("Replace");
hello.appendChild(innerDiv);
</script>
getElementsByClassName returns a collection. You can iterate over the collection and add the iframe to each element in the collection or select an (probably the first) element and add the iframe to that.
Alternatively use the querySelector method which returns the first matching element in the DOM. This is what I have done below. Note don't get confused with querySelectorAll, which returns a collection.
var innerDiv = document.createElement("div");
innerDiv.className = 'newProductPanelContainer';
innerDiv.innerHTML = `<p>I'm inserted</p><iframe id="productPanelIFrame" src="https://test.com" width="100%" height="100%" style="border: none"></iframe>`;
innerDiv.style.width = "100%";
var hello = document.querySelector(".Replace");
hello.appendChild(innerDiv);
<div class="Replace">
<div class="hello">Hello</div>
<div class="hi">Hi</div>
<div class="yes">Wait</div>
</div>
#1: You can not create an element with specific class name newProductPanelContainer with just document.createElement("newProductPanelContainer")
you can use the 2nd parameter to do that (the options) refer this
#2: You can not get the DOM of un-mount element const productPanelIFrame = document.getElementById("productPanelIFrame");
the Iframe.productPanelIFrame is the children of div.newProductPanelContainer. But you can see, its parent has not mounted yet.
Try this. It works for me
const innerDiv = document.createElement("div");
innerDiv.className = "newProductPanelContainer";
innerDiv.style.width = "100%";
const iFR = document.createElement("iframe");
iFR.id = "productPanelIFrame";
iFR.src = "https://test.com";
iFR.width = "100%";
iFR.height = "100%";
iFR.style = "border: none";
const hello = document.getElementsByClassName("Replace");
hello[0].appendChild(innerDiv);
innerDiv.appendChild(iFR);

Provide link to iframe via js

I have an iframe with src but I want to provide the link to src via javascript on click of the button. How do I pass the value?
EDIT: The webpage refreshes everytime I click on the button. It displays the webpage and then refreshes it to display again. How to avoid this?
<button type="button" onclick = "Open()">Click Me!</button>
<iframe id="iframe"
src="" //Provide link here
style="
z-index: 10;
display: None;
">
</iframe>
<script>
function Open() {
let myIframe = document.getElementById("iframe");
myIframe.style.display = 'block';
iframe.src = "www.mylink.com"
}
</script>
you're not referencing myIframe when setting src in the example, you need to do myIframe.src = 'https://www.mylink.com'

append div to another div by uisng tag name?

I have a container called adcontainer, now I have another div which contains a video generated dynamically to the dom, this new div which are generated dynamically does not have id or class juts tag name,
Now I want to append this new divs to the adconatiner
Here is HTML
<div id="adcontainer"></div>
<div style="width: 100%; height: 100%">
<video src="videos/video.mp4" autoplay="true"></video>
</div>
Js
var adContainer = document.getElementById('#adcontainer')
var video = document.getElementsByTagName('video');
var parentEl = video.parentNode;
adContainer.appendChild(parentEl)
unfortunately, this is not working, what is wrong here?
getElementById() doesnt require #
getElementsByTagName() returns a HTMLCollection, so use [0]
var adContainer = document.getElementById('adcontainer')
var video = document.getElementsByTagName('video');
var parentEl = video[0].parentNode;
adContainer.appendChild(parentEl)
<div id="adcontainer"></div>
<div style="width: 100%; height: 100%">
<video src="videos/video.mp4" autoplay="true"></video>
</div>
You have to run javascript after page is loaded.
window.addEventListener('load', function() {
var adContainer = document.getElementById('adcontainer')
var video = document.getElementsByTagName('video');
var parentEl = video[0].parentNode;
adContainer.appendChild(parentEl)
});

Javascript button slideshow

I am new to the javascript programming so can someone help me.
This is my code
var button = document.getElementsByTagName('button')[0];
var pic = document.getElementsByTagName('img')[0];
button.addEventListener('click', colorIt, false);
function colorIt(e) {
pic.innerHTML="src=/'https://picturejs.org/adv/banner.jpg\' width=\'400px\' height=\'150px\'>";
}
<div id="picture">
<img src="" id="picture" style="display:none;">
</div>
<button id="button">Click Me</button>
Change your colorIt function to the following. You need to set the src and then set the display to block. You might also want to move the height and width to CSS.
function colorIt(e) {
pic.src='https://picturejs.org/adv/banner.jpg';
pic.width = 400;
pic.height = 150;
pic.style.display = "block";
}
function fillIt(e) {
pic.innerHTML="src=/'https://picturejs.org/adv/banner.jpg\' width=\'400px\' height=\'150px\'>";
}
The Source for the image in JavaScript is invalid. You used HTML hyperlinks in JS.
.innerHTML modifies the content between the opening and closing tags (<div>THIS</div>), not the content of the tag itself (<div THIS></div>).
You can modify the tags attribute using setAttribute or by setting a property directly:
var button = document.getElementsByTagName('button')[0];
var pic = document.getElementsByTagName('img')[0];
button.addEventListener('click', colorIt, false);
function colorIt(e) {
pic.src='https://picturejs.org/adv/banner.jpg'
pic.width='400px'
pic.height='150px'
}
<div id="picture">
<img src="" id="picture" style="display:none;">
</div>
<button id="button">Click Me</button>
You were on the right track. However, you need to set each property in JS.
ALso I could not get picturejs.org to load so I placed a picsum pic in there instead.
var button = document.getElementsByTagName('button')[0];
var pic = document.getElementsByTagName('img')[0];
button.addEventListener('click', colorIt, false);
function colorIt(e) {
pic.src='https://picsum.photos/150/400'
pic.width='400'
pic.height='150';
pic.style.display='block';
}
<div id="picture">
<img src="" id="picture" style="display:none;">
</div>
<button id="button">Click Me</button>
Please try the below code:
function fillIt(e) {
pic.style.display = "block";
pic.src ="https://libertycity.net/uploads/download/gta5_lamborghini/thumbs/4qhllsfhd8fk9bm4mf36761u37/15205818409903_63e23c-pgta535987529.jpg";
}
You need to add the root of your image in , for example depeding on where you have the image downloaded in your PC.
Hope this helps !

How do I force any iframe content to appear on top if changed, without changing the attributes in the links?

How do I force any iframe content to appear on top if the content is changed as if the link had the target="_top" attribute...
EXAMPLE 1: Normally this code is what would be applied in a page.
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
if(top!=self){
top.location.replace(document.location);
alert("For security reasons, framing is not allowed; click OK to remove the frames.")
}
</script>
But I need to aply it to the iframe instead, and fire it only if the iframe is changed. How do I do that?
For example, I click on a link within the iframe, once that page changes URL then the iframe puts the page on target="_top" without having attributes for it in the iframe URL page, but the attributes for it should be from the iframe page itself.
EXAMPLE 2:
I have found a code that works as it should, the problem is only that it only fires when clicked on a button. Can I somehow make it to fire automatically when content of the iframe changes?
JavaScript:
<script type="text/javascript">
//<![CDATA[
$(window).load(function(){
document.getElementById('example-button').addEventListener('click', function (ev) {
ev.preventDefault();
var win = open('about:blank');
var iframe = document.getElementById('example-iframe');
setTimeout(function () {
var body = win.document.body;
body.style.padding = 0;
body.style.margin = 0;
body.appendChild(iframe);
iframe.style.position = 'fixed';
iframe.style.padding = 0;
iframe.style.margin = 0;
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.border = 0;
}, 100);
win.addEventListener('beforeunload', function () {
document.getElementById('example-container').appendChild(iframe);
iframe.style.position = '';
iframe.style.padding = '';
iframe.style.margin = '';
iframe.style.width = '';
iframe.style.height = '';
iframe.style.border = '';
});
});
});
//]]>
</script>
HTML:
<button id="example-button">open in new window</button>
<div id="example-container">
<iframe id="example-iframe" src="https://example.com/">
</iframe>
</div>
After fiddling and putting together with loads of ideas given online by others I came up with a solution that is 70% correct.
Now the only thing that remains is how to make it react ONLY when the iframe URL changes and not when loading like now.
JavaScript:
<script language="JavaScript">
function GoToURL()
{
var URLis;
URLis = document.URLframe.u.value
{
var location= (URLis);
window.open(location, '_blank');
}
}
</script>
HTML:
<form name="URLframe" id="URLframe" method="post">
<iframe id="test" src="https://example.com" onload="GoToURL(this);"></iframe>
<input type="hidden" name="u" size="71" value="" placeholder=" URL " id="SeekBox" onkeypress="handleKeyPress(event)">
<script type="text/javascript">
(function() {
document.getElementById('SeekBox').value = document.getElementById('test').src;
})();
</script>
</form>
To test it easier I used these codes at the bottom instead:
<iframe id="test" src="https://www.4shared.com/privacy.jsp" onload="loadurl();" width="100%" height="528px"></iframe>
<input type="text" name="u" size="71" value="" placeholder=" URL " id="SeekBox">
<input type="button" id="SeekButton" onclick="GoToURL(this);" value=" go ">
<input type="button" id="SeekButton" onclick="loadurl();" value=" load url ">
<input type="button" id="SeekButton" onclick="alerturl();" value=" alert url ">
<script type="text/javascript">
function alerturl() {
alert($('iframe').attr('src'));
}
</script>
<script type="text/javascript">
function loadurl() {
document.getElementById('SeekBox').value = document.getElementById('test').src;
}
</script>
If I understand you correctly then you want to get the src of the iframe any time there is a change within the iframe and then open a window with that src. If I'm right then it doesn't seem like it's possible. I tried to get the source of the iframe using this little bit of code but to no avail.
<iframe id="test" src="justanotherwebsite.com" onLoad="iframeLoad()"></iframe>
<script>
var counter = 0;
function iframeLoad(){
if (counter > 0){
console.log($('#test').attr('src'));
}
counter ++;
}
</script>
Let me know if I'm way off the mark on this and I'll have another look.

Categories

Resources