I need to append the iframeFooter to the actual iframe. I tried the following:
var media = document.getElementById('media');
var foot = document.getElementById('iframeFooter');
media.appendChild(foot);
console.log(media);
and also:
$(function(){
var media = $("#media").contents().find('body');
media.append($('#iframeFooter'));
$(function(){
var media = $("#media").contents().find('body');
media.append($('#iframeFooter'));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<iframe id='media' src="https://www.google.com/maps/d/embed?mid=1EhOE6w1_iHeWWpE_Y52YQjVKf3jxXOV6" ></iframe>
<div id="iframeFooter"><span style="background-color:grey">click pin for details of gas leak</span></div>
Related
I am trying to get href link from google map as shown in screenshot. The link is inside iframe. It gives null/error value from this below code. Google map is embed using jquery.
I tried: `
var a_href = $(this).find('div .google-maps-link a').attr('href');
var hrefs = $('#mapDiv .google-maps-link').find('a').attr('href');
var href = $('.google-maps-link').find('a').attr('href');
var values = $("#mapDiv .google-maps-link a").prop('href');
var value = $("#mapDiv .gm-style .place-card .bottom-actions .google-maps-link
a").attr('href');
`
screenshot
Help me.
Update:
<div class="col-md-6" id="map-location">
<div id="dvmap"></div>
</div>
$(document).ready(function () {
$.ajax({
url: "#Url.Content("~/GMap/GetGMapDataInfo")",
method: "GET",
success: function (result) {
var json = JSON.parse(result.data);
$("#dvmap").html('<iframe name="frame1" scrolling="no" marginheight="0" marginwidth="0" id="gmap_canvas" src="' + json.MapLocation + '" width="520" height="400" frameborder="0"></iframe>');
},
error: function () {
}
});
});
I want to share this location (2880 Broadway)
In View large map which is in anchor tag. I need This href link.
For security reasons, you can not access the url of an iframe served on another domain.
I want to have JavaScript to get a user's URL and return the source code of the website. I want to have this to essentially make an iframe, but with the actual code.
E.g. :
let userUrl = prompt("What website do you want displayed?","e.g. https://www.google.com");
function getSource(url){
//some code
return pageSource;
}
document.body.innerHtml=getSource(userUrl);
I tried to scrape a view page source website and turn it into an API that I could inject into JavaScript, but I had no luck.
<html>
<head><meta charset="us-ascii">
<title></title>
<script>
let userUrl = prompt("What website do you want displayed?","e.g.
https://www.google.com");
if (userUrl){
var srcFrame=""; //complete page code to inject into your iframe or return
var fetchMe = "https://example.com?q=" + userUrl;
fetch(fetchMe).then((response) => response.text()).then((text) => {
srcFrame = text;
//if injecting into iframe
myFrame.document.open();
myFrame.document.write(srcFrame);
myFrame.document.close();
// USE THE FOLLOWING TO ADD THE ORIGINAL URL AS THE baseURI SO RELATIVE
//LINKS & SCRIPTS WILL WORK AND ACCESS THE ORIGINAL SOURCE AND NOT YOUR
//SERVER
var addOrigBase= document.createElement('base');
addOrigBase.setAttribute('href',userUrl);
document.getElementById("myFrame").contentDocument.head.appendChild(addOrigBase);
});
};
</script>
</head>
<body>
<iframe onload="myFrame.frameElement.height =
(myFrame.frameElement.contentDocument.body.clientHeight)+10" frameborder=""
height="25px" id="myFrame" name="myFrame" scrolling="no" src="about:blank"
width="100%"></iframe>
</body>
</html>
I've been searching for a way to make my embedded playlist start with a random video.
This is what I tried:
<iframe src="https://www.youtube.com/embed/videoseries?list=PLPmj00V6sF0s0k3Homcg1jkP0mLjddPgJ&index=<?php print(rand(1,11)) ?>?rel=0&autoplay=1&showinfo=0&controls=0&authide=0&iv_load_policy=3&?modestbranding=1" frameborder="0" allowfullscreen></iframe>
Sadly, this does not work for some reason. Neither did it with echo. Other solutions (as well few on stackoverflow https://shrty.top/j) did not work either.
Any ideas?
Got it. This works:
<html>
<head>
<script>
var videos = ["https://www.youtube.com/embed/9bZkp7q19f0", "https://www.youtube.com/embed/dQw4w9WgXcQ"];
window.onload = function () {
var playerDiv = document.getElementById("random_player");
var player = document.createElement("IFRAME");
var randomVideoUrl = videos[Math.floor(Math.random() * videos.length)];
player.setAttribute('width', '640');
player.setAttribute('height', '390');
player.setAttribute('src', randomVideoUrl);
playerDiv.appendChild(player);
};
</script>
</head>
<body>
<div id="random_player" />
</body>
</html>
Here is the initial HTML, it is fairly small. It's only meant to be the loading screen.
<html>
<head>
<title>Simple Hello World</title>
<link href="rapid-ui.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="rapid-ui.js"></script>
</head>
<body>
This is the body of the page.
</body>
</html>
The "rapid-ui.js" will generate an HTML string, this will be a full document - including DOCTYPE, head, meta, scripts, css, etc. After it is done generating the HTML it should then display that HTML on top of the page in an iframe in the same way as if the "src" of that iframe was set to a URL that generated that same HTML string.
I tried this:
function showHTML(html) {
var iframe = $('<iframe id="display" frameborder="0"></iframe>');
iframe[0].src = 'data:text/html;charset=utf-8,' + encodeURI(html);
iframe.appendTo('body');
}
It doesn't seem CSS or scripts are executed properly.
This doesn't work either
function showHTML(html) {
var iframe = $('<iframe id="display" frameborder="0"></iframe>');
iframe[0].innerHTML = html;
iframe.appendTo('body');
}
You cannot just insert data into an iframe before it is appended to the dom. Try this
function showHTML(html) {
$('<iframe id="display" frameborder="0">').appendTo('body')
.contents().find('body').append(html);
}
Here is another way if you need to edit the head.
function showHTML(html) {
var iframe = $('<iframe id="display" frameborder="0">').appendTo('body');
var doc = iframe[0].contentWindow.document;
doc.open();
doc.write(html);
doc.close();
}
I found from here: Creating an iframe with given HTML dynamically a possible solution
function showHTML(html) {
var iframe = $('<iframe id="display" frameborder="0"></iframe>').appendTo('body');
var doc = iframe[0].contentWindow.document;
doc.open();
doc.write(html);
doc.close();
}
This solution seems to work.
Try this:
function showHTML(html) {
var iframe = '<iframe id="display" frameborder="0"></iframe>';
$("body").append(iframe).append(html);
}
append will append within the element
If you need to edit the src of the iframe instead... do this:
function showHTML(html) {
var iframe = '<iframe id="display" frameborder="0"></iframe>';
$("body").append(iframe).attr("src", "data:text/html;charset=utf-8," + encodeURI(html));
}
or this:
function showHTML(html) {
var fSrc = "data:text/html;charset=utf-8," + encodeURI(html);
var iframe = '<iframe id="display" src="\" + fSrc + "\" frameborder="0"></iframe>';
$("body").append(iframe);
}
So I'm currently developing a Magento Website. I set up a rotator using the code found here:
http://www.magentocommerce.com/wiki/4_-_themes_and_template_customization/cms_and_home_page/javascript_banner_rotator_for_home_page
If I put the code into the homepage it works as it's supposed to. However if I put the code within a static block CDATA forces itself into the code, breaking it. I'm unable to remove the CDATA as it keeps replacing itself. Code Below:
<script type="text/javascript">// <![CDATA[
var imgs1 = new Array("{{media url="wysiwyg/rotator-1-1.jpg"}}","{{media url="wysiwyg/rotator-1-2.jpg"}}","{{media url="wysiwyg/rotator-1-3.jpg"}}");
var lnks1 = new Array("http://www.example.com/","http://www.example.com/","http://www.example.com/");
var alt1 = new Array("That Looks Nice","That Looks Nice","That Looks Nice");
var currentAd1 = 0;
var imgCt1 = 3;
function cycle1() {
if (currentAd1 == imgCt1) {
currentAd1 = 0;
}
var banner1 = document.getElementById('adBanner1');
var link1 = document.getElementById('adLink1');
banner1.src=imgs1[currentAd1]
banner1.alt=alt1[currentAd1]
document.getElementById('adLink1').href=lnks1[currentAd1]
currentAd1++;
}
window.setInterval("cycle1()",4000);
// ]]></script>
<p><a id="adLink1" target="_top"> <img id="adBanner1" src="{{media url="wysiwyg/rotator-1-1.jpg"}}" alt="" width="235" height="250" border="0" /></a></p>
Any help would be appreciated.
You are commenting the javascript ending </script> tag, try putting </script> after the line CDATA ends.
Not sure about this, but worth a try.