Insert javascript into different page on same domain - javascript

Hi I'm trying to insert some javascript into a page on my server, from a different page. The 1st page will be loaded into an iframe. I would like to insert some css styles to that page (in the iframe) from the page hosting the iFrame. is there a jQuery script I can use to do this?
Something like.
page1->page2 iframe. page2 script for styles-> page1 within the iframe
<body>
<!--<div id="left_col"></div>-->
<div id="middle_col">
<!--header-->
<div id="header">
<p>iFrame Example</p>
</div>
<div id="entry">
<p>Enter your URL</p>
<textarea id="mytextarea" rows="1" cols="50"></textarea>
<a title="Check Me Out!" id="btn-wrap">
<span class="title">Click to view site</span>
<div id="info">
<p>
<strong>Don't forget</strong>
<strong>the "http://"</strong>
</p>
</div>
</a>
</div>
<br/>
<br/>
<iframe id="myframe" src="http://johnverber.com/simple.html">
</iframe>
</div>
<!--<div id="right_col"></div>-->
<script>
$(document).ready(function() {
positionAd();
});
$(window).resize(function() {
positionAd();
});
var positionAd = function() {
var WINDOW_WIDTH = $(window).width();
var WINDOW_HEIGHT = $(window).height();
var BOX_WIDTH = $('#middle_col').width();
var BOX_HEIGHT = $('#middle_col').height();
$('#middle_col').css({"left": (WINDOW_WIDTH - BOX_WIDTH)/2, "top" : (WINDOW_HEIGHT - BOX_HEIGHT)/2});
}
$('#btn-wrap').click(function() {
var urlVal = $('#mytextarea').val();
if(urlVal.match("?_myTag")){
document.getElementById('myframe').src = urlVal;
}
else{
var addTag = urlVal.concat("?_myTag");
document.getElementById('myframe').src = addTag;
}
});
$('#myframe').contents().find("head").append("<link rel="stylesheet" type="text/css" href="addStyles.css" />");
</script>
</body>

You can use jQuery's .contents() to access the iframe's inner DOM. It's quite trivial from there:
$("#iframe_id").contents().find("head").append("<script>..scripts..</script>");
//or
$("#iframe_id").contents().find("head").append("<style>..styles..</style>");
Hope that helped!

Alright this is what finally ended up working:
$("#iframe_id").contents().find("head").html("<style>..styles..</style>");

Related

How can I load iframe after function .overlay?

I have two functions I want to happen, load iframe only after the clicking (not all iframes, just this one - per click) using the .overlay. There are multiple .overlays and iframes on the page.
I have checked out various sites and these work alone but I can not get both to work together.
overlay:
$(function() {
$("span[rel]").overlay();
});
iframe code option 1:
$(function() {
$('.overhover').click(function(e) {
e.preventDefault();
var iframe = $(this).next();
iframe.attr("src", iframe.attr("data-src"));
});
iframe code option 2:
$(function(){
$(this).find("iframe").prop("src", function(){
return $(this).data("src");
});
});
My Code:
Test
<iframe data-src="http://www.bing.com" src="about:blank">
</iframe>
test
<iframe data-src="http://www.bing.com" src="about:blank">
</iframe>
<!-- Actual code -->
<div class="res-item">
<h4>Header</h4>
<h2>
<!-- Overlay Link -->
<span class="overhover" rel="#tool3">Title
</span>
</h2>
<!-- Overlay Insert -->
<div class="simple_overlay" id="tool3">
<iframe seamless="" data-src="http://www.bing.com" style="width:100%; height:75vh;" frameborder="0">
</iframe>
</div>
</div>
css not included here.
Thanks,
Load iframe:
Load IFRAME onClick
and
Is it possible to not load an iframe in a hidden div, until the div is displayed?
.overlay
http://jquerytools.github.io/demos/overlay/index.html
Based on your "Actual Code", this is what I would do:
EDIT
I've modified the code so it actually does what you want. Also, modified your "original" code slightly for demonstration purposes.
$(function() {
var toolID;
$("span[rel]").on('click', function() {
//so we get the ID of the tool we'll be loading later
toolID = $(this).attr('rel');
}).overlay({
onLoad: function() {
var ifSrc = $(toolID + ' iframe').attr('data-src');
$(toolID + ' iframe').attr('src', ifSrc);
$(toolID + ' iframe').show();
}
});
});
.simple_overlay iframe {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tools/1.2.7/jquery.tools.min.js"></script>
<div class="res-item">
<h1>Header</h1>
<h2>
<!-- Overlay Link -->
<ul>
<li><span class="overhover" rel="#tool3">Bing</span></li>
<li><span class="overhover" rel="#tool4">Duck Duck Go</span></li>
</ul>
</h2>
<!-- Overlay Insert -->
<div class="simple_overlay" id="tool3">
<iframe data-src="https://bing.com" style="width:100%; height:75vh;" frameborder="0"></iframe>
</div>
<div class="simple_overlay" id="tool4">
<iframe data-src="https://duckduckgo.com/" style="width:100%; height:75vh;" frameborder="0"></iframe>
</div>
</div>
You can take it from there, and modify it to suit your needs. Also, notice that bing's protocol is https, not http. If you use the latter, nothing will load in the iframe.

Alert After All Elements Have Loaded

I have a quiz, and if you get 100%, when you load the last page, it will alert "You got 100%!". Although, it loads in before the background loads in. This is my code:
var chanceoflive1 = parseInt(localStorage.getItem("chanceoflive1"));
var chanceoflive2 = parseInt(localStorage.getItem("chanceoflive2"));
var chanceoflive3 = parseInt(localStorage.getItem("chanceoflive3"));
var chanceoflive4 = parseInt(localStorage.getItem("chanceoflive4"));
var chanceoflive7 = parseInt(localStorage.getItem("chanceoflive7"));
var chanceoflivefinal = (chanceoflive1||0) + (chanceoflive2||0) + (chanceoflive3||0) + (chanceoflive4||0) + (chanceoflive7||0);
var chanceoflivepercent = chanceoflivefinal * 4;
function startup(){
if (chanceoflivefinal == 25) {
alert("You Got 100%!");
}
}
<body onload="startup">
<center>
<h2 class="text">Final Results</h2>
<p id="print" class="text"></p>
<p id="print2" class="text"></p>
<img src="qrcode.jpg" height="300" length="300">
<br>
<div class="wrapper">
<a href="index.html">
<button align=center onclick="handleClick()" id="button">
<canvas width="200" height="50" id="canvas" align=center></canvas>
<span class="text" id="submit">Retry</span>
</button>
</a>
</div>
</center>
</body>
How can I fix this?
You could always do something like this within a script tag:
(function(){ // on document load
alert("Ready!"); // alert "ready"
})();
Oh, and as #Barmar said, to call that function, you need to change startup to startup()
You are just missing (); like this onload="startup();".
Perhaps you can also use
document.onload = startup();
or even
window.onload = startup();

Show/Hide javascript query

I made this html test website to test show/hide javascript.
When I load the page, I would like to show the first page but in my website everything is hidden 'till I click on a button'.
<html>
<head><title>Test</title>
<script>
function toggle(target){
var artz = document.getElementsByClassName('article');
var targ = document.getElementById(target);
var isVis = targ.style.display=='block';
for(var i=0;i<artz.length;i++){
artz[i].style.display = 'none';
}
targ.style.display = isVis?'none':'block';
return false;
}
</script>
</head>
<body>
About Us
Contact
Products
<div class="article" id="about" style="display:none;">ABOUT PAGE...</div>
<div class="article" id="contact" style="display:none;">CONTACT PAGE...</div>
<div class="article" id="products" style="display:none;">PRODUCTS PAGE...</div>
</body>
</html>
Well, that's because all your elements are hidden and the toggle-function is only invoked on click.
Use this:
window.onload = function(){
toggle('about'); //or whichever page you'd like to show on startup
}
This function is invoked on page-load and calls the toggle-function, providing the content that shoud be shown.
Alternatively, you could just change your style="display:none;" to style="display:block;" in the HTML for the content that should be shown on page-load.

dynamically setting variables in html5 body?

Hi i am trying to dynamically set some of the contents of an html5 body with var strings defined in a JS.
below is what i have written so far and it doesnt seem to display the value specified.
<link href="src/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="src/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="src/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<body>
<script>
var name = "John Smith";
</script>
<div data-role="page" id="page">
<div data-role="header">
<button></button>
<h1>New Claim</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li> <p><h3>Your Name: <var>name</var></h3></p></li>
</ul>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
i am trying to insert John Smith inside the "Your Name: text.
Thanks
You will have to use JavaScript to "print" the contents of a variable, to the HTML-source. Here's an example:
<div id="test"></div>
document.getElementById('test').innerHTML = 'This goes into the element!';
But since you're using jQuery, you could do this as well:
$('#test').text('This goes into the element!');
You should either give the VAR-Tag itself or it's wrapping LI-Tag an unique ID.
In HTML
<li>
<p>
<h3>Your Name: <var id="name">name</var></h3>
</p>
</li>
JavaScript
var name = "John Smith";
$("#name").text(name);
And by the way:
You shouldn't nest a Heading inside of a Paragraph, this doesn't make any sense.
Paragraphs are INLINE while Headings are BLOCKELEMENTS.
Check out this FIDDLE
You probably want something like below. Have global JS variables assigned, reference them with a VAR html5 tag, use JS at the end of body (or after DOM load) to substitute the keys in the VAR tags with the values held in the global VARS object.
<script>
VARS = {};
VARS.name = "John Smith";
VARS.age = 45;
</script>
...
Name : <var>name</var><br/>
Age : <var>age</var>
...
<script>
// run once at end of body
var all = document.getElementsByTagName("var");
for(var i=0; i<all.length; i++) {
var elm = all[i];
var key = elm.innerHTML;
if(VARS[key] != null)
elm.innerHTML = VARS[key];
else
elm.innerHTML = "";
}
</script>
The tag isn't supposed to be used this way
Try this:
<link href="src/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="src/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="src/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<body>
<script>
var name = "John Smith";
$(document).ready(function() {
$("#name").text(name);
});
</script>
<div data-role="page" id="page">
<div data-role="header">
<button></button>
<h1>New Claim</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li> <p><h3>Your Name: <span id="name"></span></h3></p></li>
</ul>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
Edit: just to clarify one thing. The tag isn't supposed to be used to hold the place to the value of a variable. It's correct semantic meaning is more to represent a mathematical variable or a programming variable when you are showing some code on your page. If I'm wrong here, please someone correct me.
try this
$(document).ready(function() {
$("h3").text("Your name : John Smith");
});
Add some classes on your divs, to easuly select the good tags

Append a div after another div with javascript

Is there any predefined method in javascript that can append div after a div?
For example:
<div class="uploader">
<div class="file-metas">
<div class="file-name">status<span class="file-size">1kb</span></div>
<p class="state state-success">Success</p>
</div>
</div>
Now I want to insert another div with class name 'remove' after 'uploader' div.
Yeah it is possible using pure javascript
You can use insertBefore method to do so by accessing parent node of target element.
document.getElementsByClassName("uploader").parentNode
Take a look
Try this Demo
var node = document.querySelector(".uploader"),
ele = document.createElement("div");
ele.className = "remove";
ele.innerHTML = "some text";
node.parentNode.insertBefore(ele, node.nextSibling);
Vanilla JS: Supported with all the browsers:
Visualization of position names
<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->
code
// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>
More info here
function appendAfter(divToAppend, siblingBefore) {
if(siblingBefore.nextSibling) {
siblingBefore.parentNode.insertBefore(divToAppend, siblingBefore.nextSibling);
} else {
siblingBefore.parentNode.appendChild(divToAppend);
}
}
The following example demonstrates what you are trying to achieve using plain JavaScript:
<html>
<head>
<script>
function addNewDiv() {
var newDiv = document.createElement('div');
var label = document.createTextNode(" - new div - ");
var elements = document.getElementsByClassName('uploader');
var uploaderDiv = elements[0];
newDiv.appendChild(label);
elements[0].insertBefore(newDiv, uploaderDiv.children[0]);
}
</script>
</head>
<body>
<div class="uploader">
<div class="file-metas">
<div class="file-name">status<span class="file-size">1kb</span>
</div>
<p class="state state-success">Success</p>
</div>
</div>
<input type="button" onClick="addNewDiv()" value="Add new Div" />
</body>
</html>

Categories