I'm trying to create a separate $$ function for like a iframe scope and to do that I need to use the function like this, this is what I have tried
HTML:
<iframe src="" frameborder="0"></iframe>
JAVASCRIPT:
var $$ = function( html, attributes ) {
var context = $('iframe')[0].contentDocment;
return $(html, attributes, context);
}
Usage:
$$('<h1>', {text: 'Hello'}).appendTo('body');
So I should end up with this result
<iframe src="" frameborder="0">
#Document
<html>
<head></head>
<body>
<h1> Hello </h1>
</body>
</html>
</iframe>
But instead I end up with this result.
<iframe src="" frameborder="0"></iframe>
<h1> Hello </h1>
Any Advice?
JSFiddle: http://jsfiddle.net/77VED/1
How bout simply doing something like this?
$("iframe").contents().find("body").html('YOURCONTENT');
or
$('<h1>', {text: 'Hello'}).appendTo($('iframe').contents().find('body'));
Btw. this is a possible duplicate of this
Related
I want dompurify to allow iframe tags, and I add iframe as an exception(ADD_TAGS). But that removes some attributes of it. I want all attributes to be there.
<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/1.0.3/purify.min.js"></script> </head>
<body>
<!-- Our DIV to receive content -->
<div id="sanitized"></div>
<!-- Now let's sanitize that content -->
<script>
/* jshint globalstrict:true, multistr:true */
/* global DOMPurify */
'use strict';
// Specify dirty HTML
var dirty = '<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" scrolling="no" src="https://www.youtube.com/embed/vJG698U2Mvo" width="560"></iframe>';
var config = { ADD_TAGS: ['iframe'], KEEP_CONTENT: false }
// Clean HTML string and write into our DIV
var clean = DOMPurify.sanitize(dirty, config);
console.log('clean: ', clean)
document.getElementById('sanitized').innerHTML = clean;
</script>
</body>
</html>
Here is the sanitized output
"clean: <iframe width='560' src='https://www.youtube.com/embed/vJG698U2Mvo' height='315'></iframe>"
If you want to only allow the iframe tags use ALLOWED_TAGS not ADD_TAGS which allows the default allowed tags and the iframe tag that is not allowed by default.
To allow all default tags and the iframe tag :
DOMPurify.sanitize(dirty, { ADD_TAGS: ["iframe"], ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling'] });
To allow only the iframe tag :
DOMPurify.sanitize(dirty, { ALLOWED_TAGS: ["iframe"], ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling'] });
If I understand the documentation correctly, you also need to register the necessary non-standard attributes that you want to keep using:
DOMPurify.sanitize(dirty, { ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling'] });
I am trying to access the body of the document from an iframe.
I the body I want to get the src value of another iframe.
<iframe src="https://putstream.com/movie/oblivion?watching=RaHP6KwPJ8prB0MfMlhJiYYwW" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" style="height: 820.5px;">
#document
<html lang="en">
<head><style class="vjs-styles-defaults">
</head>
<body>
<iframe id="openloadIframe" allowfullscreen="" webkitallowfullscreen="true" mozallowfullscreen="true" style="width:100%;height:100%;" src="https://openload.co/embed/bbhP94t0548"></iframe>
</body>
</html>
My Attempts:
var oiframe = document.getElementsByTagName('iframe')[1]; //accessing the first iframe
var sif = oiframe.getElementById('openloadIframe').src; //getting the actual content
var ifc = oiframe.contentWindow.getElementById('openloadIframe').src; //at this point I just tried to get it working
var ifhtml = oiframe.contentWindow.document.body.innerHTML.getElementById('openloadIframe').src;
None of these work and I found nothing else how I could access the content of #document.
Please bear with me if i'm asking something very basic as I don't know much about coding. I have a stock charting application which has a built-in web browser. I configured this browser to load a html page, which i coded as below, like this mypage.html?symbol=xzy, What i am trying to do here is to capture the submitted html variable, 'symbol' and use its value as part of the url string to load a portion of another third party webpage. I can't figure out what's wrong with my javascript code that is failing to set the value of the 'src' attribute. Any help is most appreciated.
<html>
<header>
<script>
document.getElementById('iframe').src = "http://www.asx.com.au/asx/markets/dividends.do?by=asxCodes&asxCodes="+symbol+"&view=all#dividends";
</script>
</header>
<body>
<div id="dividends"></div>
<iframe id="iframe" src="" style="display:hidden;margin-left: -140px; margin-top: -33px" scrolling="no" frameborder="no" width="398" height="265"></iframe>
</body>
</html>
try move the script after html DOM
<body>
<div id="dividends"></div>
<iframe id="iframe" src="" style="display:hidden;margin-left: -140px; margin-top: -33px" scrolling="no" frameborder="no" width="398" height="265"></iframe>
</body>
<script>
document.getElementById('iframe').src = "http://www.asx.com.au/asx/markets/dividends.do?by=asxCodes&asxCodes="+symbol+"&view=all#dividends";
</script>
A couple of things: 1) start with performing the function onLoad - that way you know the script will run and popluate the src attribute after the browser renders it, and not before.
2) use a function to get the url value.
<html>
<header>
<script>
<!-- source: http://javascriptproductivity.blogspot.com/2013/02/get-url-variables-with-javascript.html -->
function GetUrlValue(VarSearch){
var SearchString = window.location.search.substring(1);
var VariableArray = SearchString.split('&');
for(var i = 0; i < VariableArray.length; i++){
var KeyValuePair = VariableArray[i].split('=');
if(KeyValuePair[0] == VarSearch){
return KeyValuePair[1];
}
}
}
function SetContent(){
var symbol = GetUrlValue('symbol');
document.getElementById('iframe').src = "http://www.asx.com.au/asx/markets/dividends.do?by=asxCodes&asxCodes="+symbol+"&view=all#dividends";
}
</script>
</header>
<body onLoad="SetContent();">
<div id="dividends"></div>
<iframe id="iframe" src="" style="display:hidden;margin-left: -140px; margin-top: -33px" scrolling="no" frameborder="no" width="398" height="265"></iframe>
</body>
</html>
Move the javascript to the bottom of the page AFTER the iframe. You are trying to change an element before it is created. Also do src="about:blank" initially, so it validates.
I have two iframes in my web page, and I want to load the second iframe after the first iframe has finished loading. How can I do this? I tried using the settimeout function, but I encountered some problems.
This is my code:
<iframe src="firstiframe" frameborder="0" widht="100%" marginheight="0" marginwidth="0" scrolling="NO" id="the_iframe">
</iframe>
<iframe src="secondframe" frameborder="0" widht="100%" marginheight="0" marginwidth="0" scrolling="NO" id="the_iframe2" >
</iframe>
<script>
function resizeIframe(iframeID)
{
document.setTimeout("resizeIframe",1000);
var iframe = window.parent.document.getElementById(iframeID);
var container = document.getElementById('content');
iframe.style.height = container.offsetHeight + 'px';
}
</script>
You can use the jQuery ready function on the frame to see when it's loaded and then set the src url for the second frame. Something like:
$('#firstframe').ready(function() {
$('#secondframe').attr('src', 'http://yourlink');
});
You can do something like this:
$("#firstIframe").load(function (){
$("#secondIframe").load();
});
I would do this with jquery:
First iframe:
<iframe id="iframe1"></iframe>
<div id="loadsecondIframeHere"></div>
<script>
$('#iframe1').ready(function(){
$('#loadsecondIframeHere').html('<iframe id="iframe2"></iframe');
});
</script>
or use $(document).ready()
I using 3 .asp pages
Page 1 :Parent.asp
page 2 :Subparent.asp
Page 3 :Child.asp
using javascript in the child.asp. I wand to pass data from Child window(iframe) to Parent window
<title>parent.asp</title>
<html>
<body>
<iframe name="I1" frameborder="0" scrolling="no" src="Subparent.asp" width="100"
height="100">
<title>subparent.asp</title>
<html>
<body>
<div id ="parentdata"></div>
<iframe name="I1" frameborder="0" scrolling="no" src="Subparent.asp" width="100" height="100">
<title>subparent.asp</title>
<html>
<body>
<iframe name="I1" frameborder="0" scrolling="no" src="Child.asp" width="100" height="100">
<title>subparent.asp</title>
<html>
<body>
<script language="JavaScript">
{
parent.document.getElementById("parentdata").innerHTML="GET DATA, WORKING"
}
</script>
</body>
</html>
</iframe>
</body>
</html>
</iframe>
</body>
</html>
</iframe>
</body>
</html>
In the "Child.asp" i using javascipt. i wand to pass data to the "" of "parent.asp"
is it possible, plz help me
hoping your support
maybe ajax is the best way to do what you need.
but if you still prefer the iframes, you can try:
Parent.asp:
function myFunction(pram1, param2)
{
alert('worked! - param1: '+param1.toString()+' param2: '+param2.toString());
}
Child.asp
top.myFunction(1,2);
for some old-school info on windows and frames: http://devedge-temp.mozilla.org/library/manuals/2000/javascript/1.3/reference/window.html#1200703 which seems, as TeKapa reckons, to still work.