story: hide the iframe if the .php is deleted or similar. So i try to hide the div that contains the iframe. Website of customer A can iframe a video from my website (external-website). But if the video is deleted, it should hide the complete iframe (the div). The complete php will be deleted or renamed if the video is not available.
Hide the <div> if external file (i want to iframe)
is not available or named as .php?=123456 or has not a <div "id", whatever.
The inline style never changes.
I tried each of this above, i don`t get it working.
I can edit the external .php file (my website too).
I do not get the script to change the inline style whatever i try.
What i want to do, hide the div if "something".
<div id="hide-me">
<iframe src="https://www.external-website.com/subfolder/1250.php" style="background-color: white;border: 0;height: auto;text-align:center;width: auto;max-height: 100%;" scrolling="no"></iframe>
</div>
<script>
function yourFunctionName () {
var anyname = document.getElementById("hide-me").style.display;
if(document.getElementById("id-in-external-php").src == 'https://www.external-website.com/subfolder/1250.php'){
document.getElementById("hide-me").style.display="block";
} else {
document.getElementById("hide-me").style.display="none";
}
}
</script>
I asked a similar question here, but it did not give a solution
enter link description here
content of https://www.external-website.com/subfolder/1250.php :
<div id="id-in-external-php">this is content for the iframe</div>
This is how I ran your code again and it worked, so you can try it:
<div id="hide-me" style="display: none;">
<iframe style="display: none;" id="id-in-external-php" src="https://www.external-website.com/subfolder/1250.php" style="background-color: white;border: 0;height: auto;text-align:center;width: auto;max-height: 100%;" scrolling="no"></iframe>
</div>
<script>
const yourFunctionName = () => {
const anyname = document.getElementById("hide-me");
const frameId = document.getElementById("id-in-external-php");
const check = frameId.contentDocument.body.children
const c = check[0].innerText;
if(c.startsWith('Cannot')) {
anyname.style.display="none";
frameId.style.display="none";
} else {
anyname.style.display="block";
frameId.style.display="block";
}
}
window.addEventListener("load", yourFunctionName, false);
</script>
I did not see where you invoked the function, so i invoked mine when window load
Related
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'
I have 2 embeds I am displaying. The embeds have a link to a pdf:
<div id="container" class="text-center">
<embed src="www.example.com/pdf1.pdf" width="550" height="800" type='application/pdf' id="mypdf1">
<embed src="www.example.com/pdf2.pdf" width="550" height="800" type='application/pdf' id="mypdf2">
</div>
I also have 2 buttons, one to show the embed and another to hide the embed. Like this:
<div class="button">
<button class="btn-info" onclick="hide('thePdf2')" type="button">HIDE</button>
</div>
<div class="button">
<button class="btn-info" onclick="show('thePdf2')" type="button">SHOW</button>
</div>
I use the following functions to show and hide the embeds:
<script>
function show(target) {
document.getElementById(target).style.display = 'block';
}
function hide(target) {
document.getElementById(target).style.display = 'none';
}
</script>
My I am only showing and hiding one of the embeds, my problem is this: Evertime I show the embed it reloads the pdf and goes to the top of the pdf page. I don't want to reload the pdf everytime I show it. How can I achieve this ?
Isn't reloading the PDF in my browser (Chrome), so I can't reproduce, but using .visibility instead of .display might work in your browser.
<script>
function show(target) {
document.getElementById(target).style.visibility = 'visible';
}
function hide(target) {
document.getElementById(target).style.visibility = 'hidden';
}
</script>
You could also use .show()/.hide() Jquery function. Working plunck here. FYI, also added demo of loading a selected PDF into single <emded>.
/* toggle show hide of pdf */
$(document).on('click', '.pdf-container button', function(event){
var $target = $(event.target);
var $pdfViewer = $target.closest('.pdf-container').find('embed');
if(!$pdfViewer){ return; }
if($pdfViewer.is(':visible')){
$pdfViewer.hide();
$target.text('show');
return;
}
$pdfViewer.show();
$target.text('hide');
});
I am using an iFrame as a text editor and want to ensure that the first part of the body is always a p tag. As such, I have it set so when users first click on the body it will insert
<p><br></p>
This works, unless the user holds down the backspace button. Once the user runs out of plaintext to backspace, it removes the tags above.
I have captured the event for backspace, but how can I prevent the users from removing the paragraph tags?
I got 11 options (I'm assuming you are using jQuery).
First, capture the keydown event, and if the value is equal to the default value, prevent the action. This will probably be inside to source html of the iframe.
$('#editor').unbind('keydown').bind('keydown', function (event) {
var doPrevent = false;
if (event.keyCode === 8 && $('#editor').html() === '<p><br></p>'){
event.preventDefault();
}
});
Option two: just make the element that's editable a div instead.
I prefer to avoid the use of an iframe. They make things needlessly complicated (imo).
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<script type="text/javascript">
function DoEdit(){
var idContent = document.getElementById('idContent');
idContent.contentEditable = "true";
//var editor = (idContent.contentWindow || idContent.contentDocument).content.document;
//editor.designMode = "on";
//editor.body.contentEditable = "true";
//editor.contentEditable = "true";
}
function ShowContent(){
var contentValue = "<p><br></p>"+$('#idContent').html();
alert(contentValue)
}
$(document).ready(function(){
DoEdit();
$('#showContentBtn').click(function(){
ShowContent();
});
});
</script>
</head>
<body>
<p><br></p>
<div style="text-align: center;margin:0 auto;width: 500px; height: 300px; border: solid; border-width: 2px;">
<div id="idContent" style="text-align: left; width:100%; height: 100%">
</div>
</div>
<div style="text-align: center;"><input id="showContentBtn" type="button" value="Show Content"></div>
</body>
</html>
Added a button in case there was some requirement to get the value for the content and keep those elements in it.
Option 3: If it needs to be inside the iframe, just set url for the above as the src for the iframe.
<html>
<body>
<div style="text-align: center">Edit Frame</div>
<iframe src="/widgets/editor/rich-text" ></iframe>
</body>
</html>
I hope that this will give you a few ideas you can work with inside your project.
Is it possible to add a textbox into an iframe, and append it into the src of the iframe. So i have created an modal box displaying a button for the user to click "ADD BUTTON"
<div id="addFeature" class="openAdd">
<div>
X
<h2>Add...</h2>
<button class="text" type="button">Text</button>
</div>
</div>
As the user clicks on the button, I need the modal box to close and a text box added. The following iframe is within main.html. As you can see the iframe displays the other html page.
<div>
<iframe class="newIframe" id="newIframe" src="webpage.html" onload="iFrameOn();">
Your browser does not support Iframes
</iframe>
</div>
Though I need the textbox to be added in webpage.html which is
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="index.js"></script>
</head>
<body onload="iFrameOn();">
<div id="design">
</div>
</body>
</html>
JS:
addTextBox() {
var text = "'<div><input type='textbox'/></div>'"
var textbox = document.createElement('div');
textbox.innerHTML = text;
var addText = document.getElementById('div').src = "webpage.html";
addText.appendChild(textbox);
}
Is it possible to do what I'm asking?
I'm afraid explaining this in the way you're trying to do this now, would be an endless swamp. Here's some guidelines, how you can achieve this quite easy.
Probably you need to remove the onload from iframe tag first. Then put these lines to your main page:
var textForIframe; // Take care that this variable is declared in the global scope
function addText () {
document.getElementById('newIframe').src = 'webpage.html';
textForIframe = '<div><input type="text" /></div>'; // or whatever text you need
return;
}
When ever your dialog is ready, call addText().
Then in webpage.html, remove the onload from body tag, and add the function below to somewhere after <script src="index.js"></script> tag.
window.onload = function () {
var addTextElement = document.getElementById('design'), // or whatever element you want to use in iframe
textToAdd = parent.textForIframe;
// depending on what iFrameOn() does, place it here...
addTextElement.innerHTML = textToAdd;
iFrameOn(); // ... or it can be placed here as well
return;
};
These snippets add a new input type="text" to #design within iframe.
var popup;
jQuery(document).ready(function(){
jQuery(window).bind('load',windowLoadComplete);
});
function windowLoadComplete() {
var settings = new Object();
popup = new SSKpopup(settings);
popup.createPopup();
jQuery('a').each(function(n){
if(jQuery(this).attr('href').indexOf("popup#")>-1) {
jQuery(jQuery(this).attr('href').split("popup#")[1]).hide();
jQuery(this).click(function(e) {
e.preventDefault();
popup.loadContent(jQuery(jQuery(this).attr('href').split("popup#")[1]));
});
}
});
}
I have that piece of code that is to create a popup containing pictures, information just like like http://jqueryui.com/demos/tabs/ and in my html code I create the popup as follows,
<a class="popup" href="/main/popup##hulk">Key Speakers</a>
<br>
Chairman
</p>
<div id="hulk" style="width: 450px; display: none;">
<img class="popup_img" border="0" alt="" src="/main/images/speaker.jpg">
<p>Content descriping the speakers</p
</div>
When I use firebug over the href I see the address different from normal location and if I insert into its as index.php/main/popup#$hulk to be same as every other links and click it then, the page direct me to localhost/xampp/. Of course no popup was displayed.