I am trying to show some video files in an Iframe for our company web site. Whenever the user clicks on a video link it will be shown inside an Iframe. I used a Javascript file to perform this action. If I host my videos on you tube, you tube show the title of video.But the javascript I used only change the content of the iframe. I need to show the title of the video files somewhere above the Iframe.
The javascript file I use is this :
<script type="text/javascript">
function ChangeVideoUrl(url)
{
document.getElementById("video_iframe").src = url;
}
</script>
and in I wrote this :
<a class="links" href="JavaScript:ChangeVideoUrl('https://..something.');"> text</a>
Any Ideas?
You can change the actual title of the iframe with iframeReference.contentDocument.title = 'some title'. If you want to change an html title like a h1 tag, you can get the reference to it and set its textContent. See below.
Sample Markup:
<button id="myBtn">Change Iframe</button>
<h1 id="h1Title">Iframe Title</h1>
<iframe id="myIframe"></iframe>
Sample JavaScript:
var myBtn = document.getElementById('myBtn');
var myIframe = document.getElementById('myIframe');
var h1Title = document.getElementById('h1Title');
myBtn.addEventListener('click', changeIframe);
function changeIframe() {
myIframe.contentDocument.title = 'New title!';
h1Title.textContent = 'New Title!';
}
Live demo (click).
As you have now updated your question with your code, there is more to say.
First, inline js (JavaScript inside your html elements) is bad. Read some of these results: https://www.google.com/search?q=Why+is+inline+js+bad%3F
Instead, follow my example and get element references and attach event listeners to them. You can store your data on the element and pull it from there if you want to.
Live demo (click).
Markup:
<div class="links">
<a data-src="a/video" data-title="A video!">Click to Play: A video!</a>
<a data-src="some/title" data-title="Some Title!">Click to Play: Some Title!</a>
<a data-src="another/title" data-title="Another Title!">Click to Play: Another Title!</a>
</div>
<h1 id="h1Title">Iframe Title</h1>
<iframe id="myIframe"></iframe>
JavaScript:
var myIframe = document.getElementById('myIframe');
var h1Title = document.getElementById('h1Title');
var links = document.querySelectorAll('.links a');
for (var i=0; i<links.length; ++i) {
addClickFunc(links[i], i);
}
function addClickFunc(elem, i) {
elem.addEventListener('click', function() {
var title = elem.getAttribute('data-title');
var src = elem.getAttribute('data-src');
changeIframe(title, src);
});
}
function changeIframe(title, src) {
myIframe.src = src;
myIframe.contentDocument.title = title;
h1Title.textContent = title;
}
Assuming some heading for title. You can do this also by javascript.
Give the id for the tag that holding the title of iframe.
Using javascript change the text in that when user click's on video link(chnage innerHTML).
Related
I have a wordpress site and theme that is providing me an ability to change elements in menu widget on all pages it appears only.
So, what I want to do is to change links and names of menu elements locally on one page. I have an id's for menu li elements, 'menu-item-7062' for example and a href tag inside it with already defined link and text values.
I have already tried and injected this code snippets in after all post content:
<script type='text/javascript'> document.getElementById('menu-item-7062').href = 'new link'; </script>
I have also created a function that is triggers after onclick event:
<script type="text/javascript">
document.getElementById("menu-item-7062").onclick = function() {
document.getElementById("menu-item-7062").href="my new link";
};
</script>
Unfortunately, they didn't affect my old link. Returning to my question, what are other solutions I could try in order to change both a href link and text value? What possible mistakes I have made?
UPDATED:
Here is my anchor tag
Автоматизация технологических процессов
A tag located under the <li id="menu-item-7062">, there is my mistake.
Did you try setAttribute function
document.getElementById("menu-item-7062").setAttribute("href", "my new link");
I have successfully affected a tag by query selector:
<script type="text/javascript">
var tag = document.querySelector('a[href="https://test.etm.io/ru/services/automation/"]');
if(tag){
tag.innerHTML = "new";
}
</script>
you should try this..
var a = document.getElementsByTagName("a");
a[0].href = "www.abc.com/";
if you doesn't know index of a then you should get id of a and then set link.
This will help you to check and set href for tag "a" without "id":
const parent = document.getElementById("menu-item-7062");
if(parent.firstElementChild.localName === 'a') {
const child = parent.firstElementChild;
child.href = 'my new link';
}
OR
const parent = document.getElementById("menu-item-7062");
parent.firstElementChild?.href = 'my new link';
I have a JQuery function that handles hiding and showing of a multiple divs on href push.
jQuery(function() {
//hide element
jQuery(".targetDiv").css("display", "none");
// Hook the button click
jQuery(".showEpisodes").click(function(e) {
// To prevent reloading of page
e.preventDefault();
//toggle and hide all other div tags
jQuery('#'+$(this).attr('target')).toggle('fast', function(){
jQuery('.targetDiv').not($(this)).hide();
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="style1">
<span class="image">
<img src="">
</span>
<a href="#/" class="showEpisodes" target="1">
<h2>Label</h2>
<div class="content"></div>
</a>
</article>
<div id="1" class="targetDiv">
<ul>
<li><button><span>1</span></button></li>
<li><button><span>GitHub</span></button></li>
<li><button><span>Phone</span></button></li>
<li><button><span>Email</span></button></li>
<li><button><span>StackOverflow</span></button></li>
<li><button><span>StackOverflow</span></button></li>
</ul>
</div>
This works fine, it's when i try to generate the articles with javascript using json to populate information in the tags that i run into trouble. Just to simplify it, i call a function:
function setAttributes(el, attrs) {
for(var key in attrs) {
el.setAttribute(key, attrs[key]);
}
}
function createArticleRow() {
var sectionDiv = document.getElementById('videoElements');
var art = document.createElement("article");
art.setAttribute('class', 'style1');
sectionDiv.appendChild(art);
//for images
var span = document.createElement("span");
span.setAttribute('class', 'image');
var image = document.createElement("img");
image.setAttribute('src', 'coverUrl');
art.appendChild(span);
span.appendChild(image);
var href = document.createElement("a");
setAttributes(href, {"href": "#/", "class": "showEpisodes", "target": "1"});
art.appendChild(href);
var h2Tag = document.createElement("h2");
h2Tag.innerHTML = 'title';
href.appendChild(h2Tag);
var divcont = document.createElement("div");
divcont.setAttribute("class", "content");
href.appendChild(divcont);
var h3Tag = document.createElement("h3");
h3Tag.innerHTML = 'description';
divcont.appendChild(h3Tag);
}
function createDivRow(){
var sectionDiv = document.getElementById('videoElements');
var infoDiv = document.createElement("div");
setAttributes(infoDiv, {"id": 1, "class": "targetDiv"});
// infoDiv.setAttribute("class", "hide");
var trailerVideo = document.createElement("iframe");
setAttributes(trailerVideo, {"width":420, "height": 315, "src": "embededTrailerLink"});
infoDiv.appendChild(trailerVideo);
sectionDiv.appendChild(infoDiv);
}
createArticleRow();
createDivRow();
jQuery(function() {
//hide element
jQuery(".targetDiv").css("display", "none");
// Hook the button click
jQuery(".showEpisodes").click(function(e) {
// To prevent reloading of page
e.preventDefault();
//toggle and hide all other div tags
jQuery('#'+$(this).attr('target')).toggle('fast', function(){
jQuery('.targetDiv').not($(this)).hide();
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="videoElements" class="tiles"></section>
For some reason this is working fine. But when I run this, the hrefs manually inputted work fine, but the generated html opens a new link with the same html page.
I feel like my problems have something to do with the href tag "#/" but i've tried many variations. I also thought that the might be some ordering issue with my import scripts.
I have opened up the elements console in a browser and the two are identical structurally, and both can access jquery.
Has anyone had similar experiences with this?
I can't put any id or class to the iframe I work because of some technical issues, and this iframe sometimes don't show any content inside and I am having a blank space instead.
I wanted to make the iframe disappear when it loads blank, to protect my page's structure with javascript.
Here is the code I wanted to make it disappear when there are no contents.
<div id="myDiv">
<iframe width="363" height="300" src="javascript:false">
<div id="iframeDiv">
----Contents----
</div>
</iframe>
</div>
I tried below script but somehow it doesn't work. Thanks in advance.
<script type="text/javascript">
setTimeout(function () {
var myTag=document.getElementById('myDiv').getElementsByTagName('iframe');
var myTagContent = myTag.contentDocument || iframe.contentWindow.document;
var myTagDiv = myTagContent.innerDoc.getElementById('iframeDiv');
if (myTagDiv === null)
{
document.getElementById("myDiv").style.display = "none";
}
}, 500);
</script>
Remove the outer <div> before <iframe>.
Add id="ifr" to <iframe> tag.
Then:
iframeDivElement = window.parent.getElementById('ifr').document.getElementById(iframeDiv');
EDIT:
Alternatively you can use iframe index in your document.
iframeDivElement = window.parent.frames[0].document.getElementById(iframeDiv');
I have a content area in which I want to display certain text when the page loads and the same text when a button is clicked (biography). When a different button is clicked (AFT), I want the text in the content area to be replaced with the content of a URL via an iframe.
I have managed to get the right text to display when the page loads, but when I click the 'AFT' button the text is replaced with "[object HTMLIFrameElement]" instead of displaying the iframe. Does anyone know whats going wrong?
HTML code:
<div id="content" >
<script src="myJS.js"></script>
<script> displayBiography(); </script>
<iframe src="cwExample.pdf" name="iframe" id="iframe1"></iframe>
</div>
<div id="leftBar">
<br><br>
<button class="button" type="button" onclick="displayBiography();">
Biography </button>
<h3> Samples of Work </h3>
<button class="button" type="button" onclick="toShow();"
target="#iframe1"> AFT </button>
JS Code:
var content = document.getElementById("content");
var biography = "<p> Text here </p>"
;
function displayBiography() {
"use strict";
content.innerHTML = biography;
}
window.onload = function() {
var iframe = document.getElementById('iframe1');
iframe.style.display = 'none';
}
function toShow() {
var iframe1 = document.getElementById('iframe1');
content.innerHTML = iframe1
biography.style.display = 'none';
iframe1.style.display = 'block';
}
There are different solutions, depending on what your future aim could be. But in general, using an iFrame is not recommended at all.
Hard coded text
If the text is static and doesn't need to be changed after coding, you can simply set the text with JS, without jQuery.
HTML
<div id="content">
</div>
JavaScript
window.onload = function() {
showBio();
// add event listeners to the buttons
}
function showBio() {
var bio = "blabla";
setContent(bio);
}
function showSmthElse() {
var txt = "other blabla";
setContent(txt);
}
function setContent(newContent) {
var div = document.getElementById("content");
if( div != null ) {
div.innerHTML = '';
div.insertAdjacentHTML = content;
}
}
Load text from database
If you want to change the text, give others the opportunity to change it or want to save multiple bios, think about storing them in a database on your server (if this is possible with your structure). In this case you should think about using AJAX. It's a technique to load data from a server without refreshing the page. There are a lot of tutorials on the web and many questions are already answered here. It's really not that difficult :)
I have a page that has a set of <div> elements, and each one has an anchor tag associated with it. It looks something like this:
<a name="anchor-0"></a>
<div id="div0">Some stuff</div>
<a name="anchor-1"></a>
<div id="div1">More stuff</div>
<a name="anchor-2"></a>
<div id="div2">Yet more stuff</div>
The problem is that this set of <div> and <a> tags are generated by Javascript, and so they don't exist until after the page has been created. When I create a link like this:
http://www.mywebsite.com/mypage.html#anchor-2
... it loads the page but does not jump to the anchor-2 position, which is only created some time after the browser has had time to execute the Javascript that generated it.
How can I get the browser to move to the selected anchor tag position once the Javascript has generated them?
Here is essentially what the Javascript that is generating the HTML looks like:
function init() {
gapi.client.setApiKey('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
gapi.client.load('blogger', 'v2', function() {
var request = gapi.client.blogger.posts.list({
'blogId': 'xxxxxxxxxxxxxxxxxxxxxxxx',
'fields': 'items(content,title)'
});
request.execute(function(response) {
var main = document.getElementById("main");
var anchor = 0;
for (var i = 0; i < response.items.length; i++)
{
var Div = document.createElement("div")
$(Div).append(response.items[i].title);
$(main).append(Div);
anchor = document.createElement("a");
anchor.name = "anchor-" + anchor;
anchor = anchor +1;
}
});
});
}
after creation of element, you could do:
location.hash = "#anchor-2";
or using scrollIntoView
element = document.getElementById('your_element-id');
element.scrollIntoView();
get the hash value from url, by doing something like::
var hashVal = window.location.hash.substr(1);
//then jump to that hash
location.hash = "#" + hashVal;