Feature to disable background reload when using data-background-iframe #3590

Claude-Alexandre · 2024-03-18T20:46:54Z

I'm learning to use revealjs and I enjoy it.

A currently searching for a way to use iframe background on multiple slide without an frame reload when the slides change to the next one.

Is there a clean way to do that ?

I found this tread but wasn't able to find a solution based on it. https://stackoverflow.com/questions/61060886/prevent-reloading-of-background-iframe-in-reveal-js

<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>reveal.js – The HTML Presentation Framework</title>

		<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
		<meta name="author" content="Hakim El Hattab">

		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="preconnect" href="https://fonts.googleapis.com">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
		<link href="https://fonts.googleapis.com/css2?family=Madimi+One&display=swap" rel="stylesheet">

		<link rel="stylesheet" href="dist/reset.css">
		<link rel="stylesheet" href="dist/reveal.css">
		<link rel="stylesheet" href="dist/theme/black.css" id="theme">
		<link rel="stylesheet" href="dist/theme/custom.css">

		<!-- Theme used for syntax highlighting of code -->
		<link rel="stylesheet" href="plugin/highlight/monokai.css">

		<style>
		</style>
	</head>

	<body>

		<div class="reveal">

			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">
				<section data-background-iframe="dist/static/shape.html">
					<h3 class="fragment">slide1</h3>
				</section>
				<section data-background-iframe="dist/static/shape.html">
					<h3 class="fragment">slide2</h3>
				</section>
			</div>

		</div>

		<script src="dist/reveal.js"></script>
		<script src="plugin/zoom/zoom.js"></script>
		<script src="plugin/notes/notes.js"></script>
		<script src="plugin/search/search.js"></script>
		<script src="plugin/markdown/markdown.js"></script>
		<script src="plugin/highlight/highlight.js"></script>
		<script>

			// Also available as an ES module, see:
			// https://revealjs.com/initialization/
			Reveal.initialize({
				controls: true,
				progress: true,
				center: true,
				hash: true,
				autoSlide: 3000,
				backgroundTransition: 'none',
  				autoSlideStoppable: false,
  				loop: true,
				backgroundIframeLazyLoading: true,
				// transition: 'fade',
			

				// slideNumber: true,
				showSlideNumber: 'all',

				// Learn about plugins: https://revealjs.com/plugins/
				plugins: [ RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight ]
			});

		</script>

	</body>
</html>

dist/static/shape.html

If it's not possible, is it possible to add it in a futur release ? 

Best regards

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature to disable background reload when using data-background-iframe #3590

Feature to disable background reload when using data-background-iframe #3590

Claude-Alexandre commented Mar 18, 2024 •

edited

Feature to disable background reload when using data-background-iframe #3590

Feature to disable background reload when using data-background-iframe #3590

Comments

Claude-Alexandre commented Mar 18, 2024 • edited

Claude-Alexandre commented Mar 18, 2024 •

edited