I want to know how I can open a series of urls in one tab. I have a list of urls, and I just want to open each one so its contents will be cached, just using one open tab so I don't end up with dozens of open tabs.
Use ** iframes ** one for each URL.
They can be made borderless using CSS if desired.
This is the my solution for your problem:
Html
<button onclick="changeURL()">
Change URL
</button>
Javascript
var listOfURL = ["https://www.google.es",
"https://www.stackoverflow.com",
"https://www.youtube.com"
];
var indexURL = 0;
var iframe = document.createElement("IFRAME");
function changeIndexURL() {
indexURL += 1;
if (indexURL >= listOfURL.length) {
indexURL = 0;
}
}
function changeURL() {
iframe.setAttribute("src", listOfURL[indexURL]);
iframe.style.width = 640 + "px";
iframe.style.height = 480 + "px";
document.body.appendChild(iframe);
changeIndexURL();
}
changeURL();
Related
I'm trying to deeplink into an app from the browser, that's working fine.
But the problem is, that iOS is showing a "Safari can't open the page" and then redirects to the app store (fallback solution).
Is it possible to make some JS magic, so that popup box doesn't appear?
Here is the code:
var now = new Date().valueOf();
setTimeout(function () {
if (new Date().valueOf() - now > 100) return;
window.location = "https://itunes.apple.com/us/app/twitter/id333903271?mt=8";
}, 10);
window.location = "twitter://timeline";
I encountered a similar scenario some time back and I figured the best way to go about is have an iframe and provide a source to it..
function mobileDeepLink() {
var iframe = document.createElement('iframe');
iframe.src = "twitter://timeline";
// hide iframe visually
iframe.width = 0;
iframe.height = 0;
iframe.frameBorder = 0;
var now = new Date().valueOf();
setTimeout(function () {
if (new Date().valueOf() - now > 100) return;
window.location = "https://itunes.apple.com/us/app/twitter/id333903271?mt=8";
}, 10);
// Append it to the body.
document.body.appendChild(iframe);
iframe.parentNode.removeChild(iframe);
}
mobileDeepLink();
That way you would not see the error popup when the scheme cannot be found.
Update
This approach will only work for IOS 8 and lower. From IOS 9 and later, deep linking is being supported natively using universal links.
I created a simple bookmarklet to append 3 invisible iframe's to the current document looking like this:
javascript: (function() {
var link = window.location.href;
var desktop = link.replace(".com", ".com/purge");;
var mobile = link.replace(".com", ".com/mpurge");
var tablet = link.replace(".com", ".com/tpurge");
var platforms = [desktop,tablet,mobile];
for (i = 0;i<platforms.length; i++){
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", platforms[i]);
ifrm.style.width = 0+"px";
ifrm.style.height = 0+"px";
document.body.appendChild(ifrm);
if(i==platforms.length-1){
ifrm.onload = function(){
location.reload();
}
}
}
})();
what i want to do its to refresh the page im at after the third iframe is loaded but for some reason i cant get this one to work, any idea why?
thx!
i will never be == platforms.length inside of loop, because your loop condition is i<platforms.length.
Make it i == platforms.length - 1 or take reloading outside of the loop
I have a web application in which I have a bunch of iFrame from with source from other tools.
Now the user should have the possibility to open the iframe content in a new window / new tab, normaly I would simply add something like this:
function onButtonClick() { var src = $('#iframe').prop('src');
windows.open(src, "_blank"); }
But his would only open a new version of my iFrame context, e.g. if a user open a page in the iframe or clicked on something and javascript changed something within my iframe, the user would be loosing this value..
So, can I make a iframe Content to a new window content without loosing the dynamic state of the website within my iframe?
You cannot move around iframes between different windows without reloading, because the spec says the attributes must be reevaluated:
When an iframe element is inserted into a document that has a browsing context, the user agent must create a nested browsing context, and then process the iframe attributes for the "first time".
-- https://html.spec.whatwg.org/multipage/embedded-content.html#the-iframe-element
(via https://bugzilla.mozilla.org/show_bug.cgi?id=254144#c97)
Old answer:
// edit: Does not work as expected, since the iframe is reloaded on move and the original src is restored.
It is easy enough if you move the iframe out of the current page:
<button id="example-button">open in new window</button>
<div id="example-container">
<iframe id="example-iframe" src="https://example.com/">
</iframe>
</div>
document.getElementById('example-button').addEventListener('click', function (ev) {
ev.preventDefault();
var win = open('about:blank');
var iframe = document.getElementById('example-iframe');
// the popup might not be immediately available:
setTimeout(function () {
var body = win.document.body;
body.style.padding = 0;
body.style.margin = 0;
body.appendChild(iframe);
iframe.style.position = 'fixed';
iframe.style.padding = 0;
iframe.style.margin = 0;
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.border = 0;
}, 0);
// move the iframe back if the popup in closed
win.addEventListener('beforeunload', function () {
document.getElementById('example-container').appendChild(iframe);
iframe.style.position = '';
iframe.style.padding = '';
iframe.style.margin = '';
iframe.style.width = '';
iframe.style.height = '';
iframe.style.border = '';
});
});
Example: http://jsfiddle.net/cpy2jykv/1/
On the Internet I found a jQuery code that works very well to open YouTube video in modal form. I change some dteails and everything was fine until I realized that do not recognize all the variations of YouTube URLs.
All I need is to extract the YouTube ID and put it in the right place. I wrote a regex and combined several versions but does not work with every URL.
This is my code:
$('a[href^="https://www.youtu"]').on('click', function(e){
var YouTube=$(this).attr('href').replace(/feature=player_embedded[&\w]*(?!['"][^<>]*>|<\/a>)/ig, "").replace(";", ""); // replace player_embedded
preg=/(?:http|https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com(?:\/embed\/|\/v\/|\/watch\?v=))([\w\-]{10,12})\b[?=&\w]*(?!['"][^<>]*>|<\/a>)/ig,
youtubeID=YouTube.replace(preg, '$1');
if (youtubeID!="" && (YouTube.indexOf('v') > -1 || YouTube.indexOf('embed') > -1))
{
// Prevent opening of external page
e.preventDefault();
// Variables for iFrame code. Width and height from data attributes, else use default.
var width = $(window).width(),
vidWidth = 800, // default
vidHeight = 450; // default
if ( $(this).attr('data-width') ) { vidWidth = parseInt($(this).attr('data-width')); }
if ( $(this).attr('data-height') ) { vidHeight = parseInt($(this).attr('data-height')); }
// responsive debug
var vidWidth = (width>vidWidth?800:(width-60));
var iFrameCode = '<div class="video-container"><iframe width="' + vidWidth + '" height="'+ vidHeight +'" scrolling="no" allowtransparency="true" allowfullscreen="true" src="https://www.youtube.com/embed/'+ youtubeID +'?controls=0&autohide=1&autoplay=1&iv_load_policy=3&theme=light&rel=0&showinfo=0" frameborder="0"></iframe></div>';
// Replace Modal HTML with iFrame Embed
$('#mediaModal .modal-body').html(iFrameCode);
// Set new width of modal window, based on dynamic video content
$('#mediaModal').on('show.bs.modal', function () {
// Add video width to left and right padding, to get new width of modal window
var modalBody = $(this).find('.modal-body'),
modalDialog = $(this).find('.modal-dialog'),
newModalWidth = vidWidth + parseInt(modalBody.css("padding-left")) + parseInt(modalBody.css("padding-right"));
newModalWidth += parseInt(modalDialog.css("padding-left")) + parseInt(modalDialog.css("padding-right"));
newModalWidth += 'px';
// Set width of modal (Bootstrap 3.0)
$(this).find('.modal-dialog').css('width', newModalWidth);
});
// Open Modal
$('#mediaModal').modal();
}
});
Thanks!
Basically, im making a javascript to refresh a page and it will find the price and buy the item when it goes up for the price desired.
I got it to work without the iframe, but I need to to work in the iframe, which is the problem ive reached.
If you went to this page: [ http://m.roblox.com/items/100933289/privatesales ]
and ran this code:
alert(document.getElementsByClassName('currency-robux')[0].innerHTML);
You would get an alert for the lowest price. In the code, this doesnt work (Hence, my problem.)
Try running the code below on this page to get it to work [ http://www.roblox.com/Junk-Bot-item?id=100933289 ]
var filePath = document.URL;
var itemid = filePath.slice(((filePath.search("="))+1));
var mobileRoot = 'http://m.roblox.com/items/';
var mobileEnd = '/privatesales';
var mobileFilePath = mobileRoot+itemid+mobileEnd;
var iframe2 = '<iframe id="frame" width="100%" height="1" scrolling="yes"></iframe>';
document.write(iframe2);
var iframe = parent.document.getElementById("frame");
iframe.height = 300;
iframe.width = 500;
iframe.src = mobileFilePath;
var price;
var snipe = false;
var lp = Number(prompt("Snipe Price?"));
document.title = "Sniping";
function takeOutCommas(s){
var str = s;
while ((str.indexOf(",")) !== -1){
str = str.replace(",","");
}
return str;
}
function load() {
if (snipe == false) {
tgs = iframe.contentDocument.getElementsByClassName('currency-robux');
price = Number((takeOutCommas(tgs[0].innerHTML)));
alert(price);
}
}
iframe.onload = load;
You might try having both pages — the one from "m.roblox.com" and the one from "www.roblox.com" — add the following up at the top of the head:
<script>
document.domain = "roblox.com";
</script>
Code from the different domains won't be allowed to look at each others page contents, but if you set the domains to the same suffix then it should work.
If you can't get it to work by sharing the same document.domain="roblox.com" code then you can try posting messages to the iframe.
Put this inside the iframe page:
window.addEventListener('message',function(e) {
});
In the parent page execute this to pass a message (can be a string or object, anything really) to the iframe:
document.getElementById("frame").contentWindow.postMessage({ "json_example": true }, "*");
Put this in the parent to listen for the message:
window.addEventListener("message", messageReceived, false);
function messageReceived(e) {
}
From inside the iframe posting a message back out:
window.parent.postMessage('Hello Parent Page','*');